<script type='text/javascript' src="{$editor.AppUrl}/admin/includes/js/builderjs/builder.js"></script>
<!--script src="{$editor.AppUrl}/admin/includes/js/builderjs/jquery-1.9.0.js"></script>
<script src="{$editor.AppUrl}/admin/includes/js/builderjs/jquery-migrate-1.2.1.js"></script-->
<script>
function myFunction() {
    window.open("builderjs.php?type={$editor.ImageDirType}&ElementId={$editor.ElementId}&IDTI={$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="{$editor.AppUrl}/admin/includes/js/builderjs/builder.css" /> 
<link rel="stylesheet" href="includes/styles/tailwind.min.css" />
<style>

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

$( document ).ready(function() {
    editor{$editor.ElementId} .init();
    var test = {$editor.ElementId} ;
        
    $('#saveButton').on('click', function(e) {
        e.preventDefault();
            
        editor{$editor.ElementId} .save(function() {
            
            console.log('saved!');          
        });
    });
    var UsingWYSIWYG = '%%GLOBAL_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{$editor.ElementId}" style="height: 500px; resize: both; overflow: auto;"></div>
            </div>            
        </div>
    </div>

 <textarea rows="10" id="{$editor.ElementId}" name="{$editor.ElementId}"  class="InterspireEditor" hidden=hidden>
  {$editor.HtmlContent}
</textarea>