<?php $IEM = $tpl->Get('IEM'); ?><script type='text/javascript' src="<?php echo $tpl->Get('editor','AppUrl'); ?>/admin/includes/js/builderjs/builder.js"></script>
<!--script src="<?php echo $tpl->Get('editor','AppUrl'); ?>/admin/includes/js/builderjs/jquery-1.9.0.js"></script>
<script src="<?php echo $tpl->Get('editor','AppUrl'); ?>/admin/includes/js/builderjs/jquery-migrate-1.2.1.js"></script-->
<script>
function myFunction() {
    window.open("builderjs.php?type=<?php echo $tpl->Get('editor','ImageDirType'); ?>&ElementId=<?php echo $tpl->Get('editor','ElementId'); ?>&IDTI=<?php echo $tpl->Get('editor','ImageDirTypeId'); ?>", "_blank", "toolbar=no,location=no,status=no,copyhistory=no,scrollbars=yes,width=3000,height=2000, resizable=yes, fullscreen=yes");
}
</script>
<link rel="stylesheet" href="<?php echo $tpl->Get('editor','AppUrl'); ?>/admin/includes/js/builderjs/builder.css" /> 

<style>
a {
    text-decoration: underline;
}

td,
::after,
::before {
    box-sizing: unset !important;
}

.undo-redo-actions {
    display: none !important;
}

#builder_iframe{
  pointer-events: none;
}

@font-face {
  font-family: 'Material Icons Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(<?php echo $tpl->Get('editor','AppUrl'); ?>/admin/includes/js/builderjs/font/materialiconsoutlined.woff2) format('woff2');
}

.material-icons-outlined {
  font-family: 'Material Icons Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

</style>

       <script>
      		 
            var editor<?php echo $tpl->Get('editor','ElementId'); ?> = new Editor({
                strict: true, // default == true
                emailMode: true,
				id:'<?php echo $tpl->Get('editor','ElementId'); ?>',
				width : "<?php echo $tpl->Get('editor','Width'); ?>",
				height : "<?php echo $tpl->Get('editor','Height'); ?>", 
                showInlineToolbar: true, // default == true
                root: '<?php echo $tpl->Get('editor','AppUrl'); ?>/admin/includes/js/builderjs/',
				urlBack: window.location.origin,
			    uploadAssetUrl: 'remote.php',
                uploadAssetMethod: 'POST',
                uploadTemplateUrl: '',
                canvas: '#contentCanvas<?php echo $tpl->Get('editor','ElementId'); ?>',
                sidePanel: '#sidebarPanel<?php echo $tpl->Get('editor','ElementId'); ?>',
                saveUrl: '',
                saveMethod: 'POST',
                data: {
                    _token: 'CSRF_TOKEN',
                    type: '<?php echo $tpl->Get('editor','ImageDirType'); ?>',
					what :'uploadbuilderjsimage',
					app_url:'<?php echo $tpl->Get('editor','AppUrl'); ?>',
					ImageDirTypeId :'<?php echo $tpl->Get('editor','ImageDirTypeId'); ?>',
                    template_id: '<?php echo $tpl->Get('editor','ElementId'); ?>'
                },
				 
                export: {
            		url: ''
			   },
				
                backgrounds: [
                ]
            });

         $( document ).ready(function() {
                editor<?php echo $tpl->Get('editor','ElementId'); ?> .init();
				var test = <?php echo $tpl->Get('editor','ElementId'); ?> ;
				 
                $('#saveButton').on('click', function(e) {
                    e.preventDefault();
                      
                    editor<?php echo $tpl->Get('editor','ElementId'); ?> .save(function() {
                        
                        console.log('saved!');          
                    });
                });
				var UsingWYSIWYG = '<?php if(isset($GLOBALS['UsingWYSIWYG'])) print $GLOBALS['UsingWYSIWYG']; ?>';
			 });
       </script>
     
		

<div class="top container-fluid >
    <div class="row" style="
    width: 100%;
    height: 55px;
    background: #333;
    padding: 0;
    box-shadow: -1px 0px 10px 0px;
    z-index: 4;
    padding-left: 5px;
    padding-right: 5px;">
  
        <div class="col-md-6 top-right">
            <div class="mode-device ml-auto" style="">
                
                <li class="device mode-mobile " data-mode="mode-mobile" title="Mobile">
                    <span class="material-icons-outlined icon icon-mode" style=" color: rgb(150, 150, 150);">smartphone</span>
                </li>
                <li class="device mode-tablet" data-mode="mode-tablet" title="Tablet">
                    <span class="material-icons-outlined icon-mode" style="color: rgb(150, 150, 150);">tablet_android</span>
                </li>
                <li class="device mode-desktop" data-mode="mode-desktop" title="Desktop">
                    <span class="material-icons-outlined icon icon-mode">computer</span>
                </li>
                    
            </div>
            <!--ul class="icons">
                <li class="ask-help">
                    <span class="material-icons-outlined icon mr-1">help_outline</span>
                    <span class="help">{language.menubar.items.help}</span>
                </li>
            </ul-->
            
            <div class="d-flex align-items-center">
                
                <a class="export-button" href="#">
                    <button class="btn btn-primary btn-export" onclick="myFunction()" type="button">Edit</button>
                </a>
            
            </div>                
        </div>
    </div>
</div><!-- end top-->
  
   <div class=""content container-fluid" style="padding:5px !important;">
        <div class="row">
            <div class="col-md-12" style="padding-right: 5px !important;">
			   <div id="contentCanvas<?php echo $tpl->Get('editor','ElementId'); ?>" style="height: 500px; resize: both; overflow: auto;"></div>
            </div>            
        </div>
    </div>

 <textarea rows="10" id="<?php echo $tpl->Get('editor','ElementId'); ?>" name="<?php echo $tpl->Get('editor','ElementId'); ?>"  class="InterspireEditor" hidden=hidden>
  <?php echo $tpl->Get('editor','HtmlContent'); ?>
</textarea>