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

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

%div
  / Nav tabs
  %ul#tabs-translation.nav.nav-tabs{:role => "tablist"}
    - @languages.each do |lang|
      - t = lang.blank? ? 'Default' : lang
      %li{:role => "presentation"}
        %a{"aria-controls" => "tab-content-#{lang}", "data-toggle" => "tab", :href => "#tab-content-#{lang}", :role => "tab"}
          =t

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


      %div{id: "tab-content-#{lang}", class: ["tab-pane", ("active" if lang=='')], role: "tabpanel"}
        =ftran.input :item_id, as: :hidden, :readonly=>true
        =ftran.input :lang, :readonly=>true
        -#=ftran.input :content, label: 'Content'
        - if @item.has_code?
          .form-group
            .col-sm-12.col-md-12.control
              = ftran.input_field :content, as: :text, label: "Content", :rows => 16, :cols => 120, :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'}



/////////

-#- 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'}




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

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

  :javascript
    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 ) {
        console.log("go text");
        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());
        });


      });
    });