extends /templates/base

block content
  div
    ol.breadcrumb
      li
        a(href="/editor", data-i18n="editor.main_title") CodeCombat Editors
      li
        a(href="/editor/thang", data-i18n="editor.thang_title") Thang Editor
      li.active
        | #{thangType.attributes.name}

  img#portrait.img-thumbnail

  button.btn.btn-primary#save-button(data-toggle="coco-modal", data-target="modal/save_version")
    | Save
  button.btn.btn-primary#revert-button(data-toggle="coco-modal", data-target="modal/revert", data-i18n="revert.revert") Revert
  
  h3 Edit Thang Type: "#{thangType.attributes.name}"

  ul.nav.nav-tabs
    li.active
      a(href="#editor-thang-main-tab-view", data-toggle="tab") Main
    li
      a(href="#editor-thang-components-tab-view", data-toggle="tab") Components
    li
      a(href="#editor-thang-spritesheets-view", data-toggle="tab") Spritesheets
    li
      a(href="#editor-thang-colors-tab-view", data-toggle="tab")#color-tab Colors

  div.tab-content
    div.tab-pane#editor-thang-colors-tab-view
    
    div.tab-pane.active#editor-thang-main-tab-view

      div.main-area.well
        div.file-controls
          select#animations-select
            for animation in animations
              option #{animation}
          button.btn.btn-small.btn-primary#upload-button
            i.icon-upload
          button.btn.btn-small.btn-primary#clear-button
            i.icon-remove
          input#real-upload-button(type="file")

        button.btn.btn-small.btn-primary#marker-button
          i.icon-map-marker

        button.btn.btn-small.btn-primary#end-button
          i.icon-stop

        div.slider-cell
          | Rotation:
          span.rotation-label
          .selector#rotation-slider
        div.slider-cell
          | Scale:
          span.scale-label
          .selector#scale-slider
        div.slider-cell
          | Resolution:
          span.resolution-label  4.0x
          .selector#resolution-slider
        div.slider-cell
          | Health:
          span.health-label  10hp
          .selector#health-slider
      
        .clearfix

      div#settings-col
        div#thang-type-treema
      
      canvas#canvas(width="400", height="400")

      .clearfix

    div.tab-pane#editor-thang-components-tab-view
  
      #thang-components-edit-view

    div.tab-pane#editor-thang-spritesheets-view
      
      div#spritesheets

  .clearfix