{% if (__SELF__.edit) %}

{% set editorname = __SELF__.id %}


{% if not editmode %}

{% put styles %}
<style type="text/css">
  body {
    padding: 0;
    margin: 0;
  }
  div.builder-panel {
    z-index: 99999 !important;
    position: absolute !important;
  }
  #insertAfterBtn {
    border-style: none !important;
    font-size: 12px !important;
    opacity: 0.2 !important;
    padding: 5px !important;
  }
  #insertAfterBtn:hover {
    opacity: 1 !important;
  }
</style>
{% endput %}

<div class="builder-panel" id="builder-panel{{editorname}}">
  <a href="{{ this.controller.currentPageUrl() }}?&builder-edit-mode=1&editor={{ __SELF__.alias }}">
    <button class="btn1" id="insertAfterBtn" >
      {% if __SELF__.property('button_text') %}
      {{ __SELF__.property('button_text') }}
      {% else %}
      Edit
      {% endif %}
    </button>
  </a>
</div>



{% put styles %}        
<link rel="stylesheet" href="{{url("/")}}/page-bulder.css?type={{ __SELF__.property('savedatato') }}&file={{ __SELF__.property('file') }}">
{% endput %}

{{ __SELF__.getHTML(__SELF__.content) | raw }}  

{% put scripts %}
{{ __SELF__.getScripts(__SELF__.content) | raw }}
{% endput %}



{% else %}

{% if editor == __SELF__.alias %}

<link href="{{curdir}}/plugins/pkurg/pagebuilder/formwidgets/editor/assets/css/grapes.min.css?v=1" rel="stylesheet"/>
<link href="{{curdir}}/plugins/pkurg/pagebuilder/formwidgets/editor/assets/css/grapesjs-preset-webpage.min.css" rel="stylesheet"/>
<link href="{{curdir}}/plugins/pkurg/pagebuilder/formwidgets/editor/assets/css/grapes-code-editor.min.css" rel="stylesheet"/>
<link href="{{curdir}}/plugins/pkurg/pagebuilder/formwidgets/editor/assets/css/editor.css?v=2" rel="stylesheet"/>
<script src="{{curdir}}/plugins/pkurg/pagebuilder/formwidgets/editor/assets/grapes.min.js?v=1"></script>
<script src="{{curdir}}/plugins/pkurg/pagebuilder/formwidgets/editor/assets/grapesjs-preset-webpage.min.js"></script>
<script src="{{curdir}}/plugins/pkurg/pagebuilder/formwidgets/editor/assets/grapesjs-code-editor.min.js"></script>
<script src="{{curdir}}/plugins/pkurg/pagebuilder/formwidgets/editor/assets/grapesjs-lory-slider.min.js"></script>
<script src="{{curdir}}/plugins/pkurg/pagebuilder/formwidgets/editor/assets/grapesjs-custom-code.min.js?v=2"></script>
<script src="{{curdir}}/plugins/pkurg/pagebuilder/formwidgets/editor/assets/vkbeautify.js"></script>
<link href="{{curdir}}/plugins/pkurg/pagebuilder/formwidgets/editor/assets/builder.css?v=4" rel="stylesheet"/>


{% put styles %}
<style type="text/css">
  body {
    padding: 0;
    margin: 0;
  }
</style>
{% endput %}

<div style="display: 1none;" id="gjs{{ editorname }}">
</div>



<script type="text/javascript">
	var t = {{ __SELF__.jsoncontent | raw }};
	var editor{{ editorname }} = grapesjs.init({
		container : '#gjs{{ editorname }}',
    //fromElement: true,
    components: t,

    colorPicker: { appendTo: 'parent', offset: { top: 20, left: -175 } },
    plugins: ['gjs-preset-webpage', 'grapesjs-lory-slider', 'grapesjs-custom-code'],
    pluginsOpts: {
      'gjs-preset-webpage': {
           // options
         },
         'grapesjs-lory-slider': {
           // options
         }
       },
       commands: {
        defaults: [
             //window['@truenorthtechnology/grapesjs-code-editor'].codeCommandFactory(),
             window['@truenorthtechnology/grapesjs-code-editor'].codeCommandFactory({inlineCss: true}),
             ],
           },
           allowScripts: 1,
           storageManager: {
       id: 'gjs-',             // Prefix identifier that will be used inside storing and loading
       type: 'local',          // Type of the storage
       autosave: true,         // Store data automatically
       // autoload: true,         // Autoload stored data on init
       autoload: false,         // Autoload stored data on init
       stepsBeforeSave: 1,     // If autosave enabled, indicates how many changes are necessary before store method is triggered
       storeComponents: true,  // Enable/Disable storing of components in JSON format
       //storeStyles: true,      // Enable/Disable storing of rules in JSON format
       storeHtml: true,        // Enable/Disable storing of components as HTML string
       //storeCss: true,         // Enable/Disable storing of rules as CSS string
     },  
     canvas: {
      styles: [
      {{ __SELF__.getSetting('builder_styles') | raw }}        
      ],
      scripts: [
      {{ __SELF__.getSetting('builder_scripts') | raw  }}        
      ],
    },
    assetManager: {
      storageType   : '',
      storeOnChange  : true,
      storeAfterUpload  : true,
      upload: '{{url(mediapath)}}',
      assets      : [
      {% for file in files %}
      '{{ path }}/{{ file}}',
      {% endfor %}
      ],
      uploadFile: function(e) {
       var files = e.dataTransfer ? e.dataTransfer.files : e.target.files;
       var formData = new FormData();
       for(var i in files){
        formData.append('file-'+i, files[i])
      }
      $.ajax({
        url: '{{url('pagebuilderuploader')}}',
        type: 'POST',
        data: formData,
        contentType:false,
        crossDomain: true,
        dataType: 'json',
        mimeType: "multipart/form-data",
        processData:false,
        success: function(result){
         var myJSON = [];
         $.each( result['data'], function( key, value ) {
          myJSON[key] = value;
        });
         var images = myJSON;
         editor{{ editorname }}.AssetManager.add(images);
       }
     });
    },
  },
});



  var CustomBlock = editor{{ editorname }}.BlockManager;
  var Editor = editor{{ editorname }};

  {{ customblocks | raw }}

  {% if octobermedia %}
//media assets
editor{{ editorname }}.Commands.add('open-assets', {

 run(editor, sender, opts = {}) {

  var media = new $.oc.mediaManager.popup({
    alias: '{{__SELF__.alias}}',
    cropAndInsertButton: true,
    onInsert: function(items) {
      if (!items.length) {
        $.oc.alert($.oc.lang.get('mediamanager.invalid_image_empty_insert'))
        return
      }
      if (items.length > 1) {
        $.oc.alert($.oc.lang.get('mediamanager.invalid_file_single_insert'))
        return
      }
      if (items[0].documentType !== 'image') {
        $.oc.alert($.oc.lang.get('mediamanager.invalid_image_invalid_insert', 'The file "'+items[0].title+'" is not an image.'))
        return;
      }      

      var picurl = '{{ mediadir }}' + items[0].path;

      opts.target.set('src', picurl);
      const fakeAsset = { get: () => picurl };
      opts.onSelect(fakeAsset);

      this.hide()
    }
  }) ;
}
});
{% endif %}



editor{{ editorname }}.BlockManager.add('div-block-box', {
  label: 'div',
  content: `<div class="box" ></div>
  <style> div.box {min-height: 40px;}</style>`,
  category: 'Basic',
  attributes: { class: 'fa fa-square-o' },
});



   //add the open-code button to the views panel
   editor{{ editorname }}.Panels.addButton('views',{
   	id: 'open-code',
       className: 'fa fa-file-code-o ', //I will change the icon to a better icon later if this code works
       //label: 'Save to server',
       command: 'open-code',
       attributes: { title: 'Open Code'},
     });


   editor{{ editorname }}.Panels.addButton('options',{
   	id: 'save-code',
       className: 'fa fa-floppy-o ', //I will change the icon to a better icon later if this code works
       //label: 'Save to server',
       command: function(editor) {




        //document.getElementById("").innerHTML = "whatever";
        var data = '<style type="text/css">' + editor.getCss() + '</style>' + editor.getHtml();

        function replaceSubStr(str, subStr, replacer)
        {
         var newStr = '', n = subStr.length, N = str.length;

         for (var i = 0; i < N; i++)
          {  var j = i;
           while (j < i+n && str[j] === subStr[j-i]) j++;
           if (j === i+n)
            {  newStr += replacer;
             i += n-1;
           }
           else newStr += str[i];
         }

         return newStr;
       }

       var s = String.fromCharCode(123)+ String.fromCharCode(35);
       data = replaceSubStr(data, ';}', ';}\n' );
       data = replaceSubStr(data, s , '{ #' );
       data = replaceSubStr(data, '\n\n', '' );

       data = data.replace(/(?:(?:\r\n|\r|\n)\s*){2}/gm, "");

       function decodeHtml(html) {
        var txt = document.createElement("textarea");
        txt.innerHTML = html;
        return txt.value;
      }


      var xmlData = decodeHtml(data);

      xmlData = vkbeautify.xml(xmlData);


      $('form').request('{{ __SELF__ }}::onSaveFile', 

      {

        data: {file: '{{__SELF__.file}}', content: xmlData},

        success: function() { 

          window.location.href = "{{ this.page.url }}";

        }
      }


      );



    },
    attributes: { title: 'Save Code'},
  });


   editor{{ editorname }}.Panels.addButton('options',{
    id: 'close-editor',
       className: 'fa fa-times', //I will change the icon to a better icon later if this code works
       //label: 'Save to server',
       command: function(editor) {

        window.location.href = "{{ this.controller.currentPageUrl() }}";        

      },
      attributes: { title: 'Close Builder'},
    });





   document.getElementById("gjs{{ editorname }}").style.height = window.screen.availHeight+'px';
   document.getElementById("builder-panel{{editorname}}").style.display = "block";


 </script>

 {% endif %}
 {% endif %}
 {% else %}
 
 {% put styles %}        
 <link rel="stylesheet" href="{{url("/")}}/page-bulder.css?type={{ __SELF__.property('savedatato') }}&file={{ __SELF__.property('file') }}">
 {% endput %}

 {{ __SELF__.getHTML(__SELF__.content) | raw }}  

 {% put scripts %}
 {{ __SELF__.getScripts(__SELF__.content) | raw }}
 {% endput %}


 {% endif %}