- editor = @item.has_code? ? 'ace' : 'tinymce'

- @languages = [''] if !@item.is_translated

.row
  .col-md-8.col-sm-8
    / Nav tabs
    %ul#tabs-translation.nav.nav-tabs
      - @languages.each do |lang|
        - t = lang.blank? ? 'Default' : lang
        %li.nav-item{class: [('active' if lang=='')]}
          %a{"aria-controls" => "tab-content-#{lang}", "data-toggle" => "tab", :href => "#tab-content-#{lang}", :class=>'nav-link'}
            =t

    / Tabs content
    #tabs-translation-content.tab-content

      = f.simple_fields_for :translations do |ftran|
        - tran = ftran.object
        - lang = tran.lang
        - name = lang=='' ? 'def' : lang

        - lang_ok = lang=='' || lang=='def' || @languages.include?(lang)

        - if lang_ok
          %div{id: "tab-content-#{lang}", class: ["tab-pane", ("active" if lang=='')], role: "tabpanel", data: {lang: lang}}
            =ftran.input :item_id, as: :hidden, :readonly=>true
            =ftran.input :lang, :readonly=>true
            -#=ftran.input :content, label: 'Content'
            - if @item.has_code?
              .form-group
                = ftran.input_field :content, as: :text, label: "Content", :rows => 16, :cols => 80, :class=>'form_input_content', :data=>{lang: name}

                %div{id: "content-#{name}", class: '', data: {lang: name}}(style="width:100%; height: 600px; border: 2px #333333 solid;")

            - else
              .form-group
                .col-sm-12.col-md-12.control
                  -#= ftran.input :content, as: :text, label: "Content", input_html: {:rows => 16, :cols => 120, :class=>'editor'}
                  = ftran.input_field :content, as: :text, label: "Content", rows: 16, cols: 120, class: 'editor', style: "min-height: 600px;"

          .clearfix

      -# @languages.each do |lang|
        %div{id: "content-#{lang}", class: "tab-pane", role: "tabpanel"}

          - if @item.has_code?
            .form-group.template_content
              .col-sm-12.col-md-12.control
                = f.input_field :content, as: :text, label: "Content", html: {:rows => 16, :cols => 120, :class=>'' }

                #content(style="width:100%; height: 600px; border: 2px #333333 solid;")

          - else
            = f.input :content, as: :text, label: "Content", input_html: {:rows => 16, :cols => 120, :class=>'editor'}

  .col-md-4.col-sm-4(style="padding-top:40px;")
    / panel - tabs
    %ul#editor-panels-tabs.nav.nav-tabs
      %li.nav-item{class: "active"}
        %a{"aria-controls" => "panel-blocks", "data-toggle" => "tab", :href => "#panel-blocks", :class => "nav-link"}
          Blocks
      %li.nav-item
        %a{"aria-controls" => "panel-images", "data-toggle" => "tab", :href => "#panel-images", :class => "nav-link"}
          Images

    / Panels. Tabs content
    #editor-panels-content.tab-content
      %div{id: "panel-blocks", class: "tab-pane active"}
        blocks...

      %div{id: "panel-images", class: "tab-pane"}
        images...


.clearfix

/////////

-#- if @item.has_code?
  .form-group.template_content
    %label(for="inputContent" class="col-sm-2 col-md-1 control-label")
      Content

    .col-sm-8.col-md-8.control
      = f.input_field :content, as: :text, label: "Content", html: {:rows => 16, :cols => 120, :class=>'' }

      #content(style="width:100%; height: 600px; border: 2px #333333 solid;")

-# else
  = f.input :content, as: :text, label: "Content", input_html: {:rows => 16, :cols => 120, :class=>'editor'}



:javascript
  function get_current_tab(){
    return $('#tabs-translation-content .tab-pane.active');
  }
  function get_current_tab_lang(){
    var lang = get_current_tab().data('lang');

    return lang;
  }

- if editor=='tinymce'
  = render 'optimacms/admin/common/js_tinymce'

- elsif editor=='ace'
  = render 'optimacms/admin/common/js_ace'


  :javascript
    $( document ).ready(function() {

      // panel blocks
      init_panel_blocks('#{@item.basedirpath rescue ''}');

      $('#tabs-translation a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        //init_panel_blocks();
        //e.target // newly activated tab
        //e.relatedTarget // previous active tab
      })
    });

    function init_editor(id){
      //var editor = ace.edit("content");
      var editor = ace.edit(id);
      editor.setTheme("ace/theme/chrome");
      editor.getSession().setMode("ace/mode/haml");
      editor.getSession().setNewLineMode("windows");
      editor.getSession().setTabSize(2);

      return editor;
    }

    // init editors
    var editors = [];

    #{
      @languages.map do |lang|
        name = lang=='' ? 'def' : lang
        "editors[\"#{name}\"] = init_editor(\"content-#{name}\");"
      end.join(' ')
    }


    $(document).ready(function() {

      // set content from input to editor
      $( "textarea.form_input_content" ).each(function( index ) {
        var textarea = $(this);
        var lang=textarea.data('lang');
        textarea.hide();
        editors[lang].getSession().setValue(textarea.val());
      });


      // set content from editor back to input
      $('#mainform form').submit(function(){
        $( "textarea.form_input_content" ).each(function( index ) {
          var textarea = $(this);
          var lang=textarea.data('lang');
          textarea.val(editors[lang].getSession().getValue());
        });


      });
    });



= render 'optimacms/admin/templates/js_editor_panel_blocks'