%aside.control-sidebar.control-sidebar-light#assets-editor
  %a.aside-close#close-assets-editor
    .label.bg-gray
      X
  %ul.nav.nav-tabs
    %li.active
      %a{'aria-expanded': "true", "data-toggle" => "tab", :href => "#editor_tab_1"}
        %i.fa.fa-image
    %li
      %a{'aria-expanded': 'false', "data-toggle" => "tab", :href => "#editor_tab_2"}
        %i.fa.fa-film
    %li
      %a{'aria-expanded': 'false', "data-toggle" => "tab", :href => "#editor_tab_3"}
        %i.fa.fa-music
    %li
      %a{'aria-expanded': 'false', "data-toggle" => "tab", :href => "#editor_tab_4"}
        %i.fa.fa-text-height
  .tab-content.container-files.bg-gray
    #editor_tab_1.tab-pane.active
      - @files_list.each_with_index do |file, i|
        - if file[:folder].eql?("images")
          .box.box-solid
            .box-header.with-border{title: "#{file[:name]}"}
              .row
                .col-lg-12
                  %h4.box-title
                    %i.fa.fa-image
                    = truncate(file[:name], length: 30, omission: '...')
            .box-body.no-padding
              .back-file-xs
                .file-image{style:"background-image:url('#{file[:path]}')"}
            .box-body
              %span.box-title
                = file[:size]
                %button.btn.btn-default.pull-right{onclick: "copy('#{file[:id]}')"}
                  %input.hidden{id: "#{file[:id]}", value: "#{file[:path]}"}
                  %i.fa.fa-save
    #editor_tab_2.tab-pane
      - @files_list.each_with_index do |file, i|
        - if file[:folder].eql?("videos")
          .box.box-solid
            .box-header.with-border{title: "#{file[:name]}"}
              .row
                .col-lg-12
                  %h4.box-title
                    %i.fa.fa-film
                    = truncate(file[:name], length: 30, omission: '...')
            .box-body.no-padding
              .back-file-xs
                .center
                  %video{ controls: 'true'}
                    %source{ src:"#{file[:path]}", type:"video/#{file[:format]}" }
                    Su navegador no soporta contenido multimedia.
            .box-body
              %span.box-title
                = file[:size]
                %button.btn.btn-default.pull-right{onclick: "copy('#{file[:id]}')"}
                  %input.hidden{id: "#{file[:id]}", value: "#{file[:path]}"}
                  %i.fa.fa-save
    #editor_tab_3.tab-pane
      - @files_list.each_with_index do |file, i|
        - if file[:folder].eql?("audios")
          .box.box-solid
            .box-header.with-border{title: "#{file[:name]}"}
              .row
                .col-lg-12
                  %h4.box-title
                    %i.fa.fa-music
                    = truncate(file[:name], length: 30, omission: '...')
            .box-body.no-padding
              .back-file-xs
                .center
                  %audio#aside-audio{controls: true}
                    %source{ src:"#{file[:path]}", type:"audio/#{file[:format]}" }
                    Your browser does not support the audio tag.
            .box-body
              %span.box-title
                = file[:size]
                %button.btn.btn-default.pull-right{onclick: "copy('#{file[:id]}')"}
                  %input.hidden{id: "#{file[:id]}", value: "#{file[:path]}"}
                  %i.fa.fa-save
    #editor_tab_4.tab-pane
      - @files_list.each_with_index do |file, i|
        - if file[:folder].eql?("fonts")
          .box.box-solid
            .box-header.with-border{title: "#{file[:name]}"}
              .row
                .col-lg-12
                  %h4.box-title
                    %i.fa.fa-text-height
                    = truncate(file[:name], length: 30, omission: '...')
            .box-body.no-padding
              .back-file-xs
                .center
                  %i.fa.fa-text-height#font-icon-size
            .box-body
              %span.box-title
                = file[:size]
                %button.btn.btn-default.pull-right{onclick: "copy('#{file[:id]}')"}
                  %input.hidden{id: "#{file[:id]}", value: "#{file[:path]}"}
                  %i.fa.fa-save
.control-sidebar-bg
:javascript
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (ev) {
    var id = `#{@theme.id}`;

    $(document).bind('keydown', function(e) {
      if(e.ctrlKey && (e.which == 83)) {
        e.preventDefault();
        codeHTML.saveLayout(id);
      }
    });
  })