{{!
   Licensed to the Apache Software Foundation (ASF) under one
   or more contributor license agreements.  See the NOTICE file
   distributed with this work for additional information
   regarding copyright ownership.  The ASF licenses this file
   to you under the Apache License, Version 2.0 (the
   "License"); you may not use this file except in compliance
   with the License.  You may obtain a copy of the License at
  
       http://www.apache.org/licenses/LICENSE-2.0
  
   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
}}

<div class="panel-default panel-files">
  <div class="panel-heading">
    {{!-- BREADCRUMBS --}}
    {{bread-crumbs path=path}}

    <div class="um-section">
    {{!-- UPLOADER --}}
    <div {{bind-attr class="isUploading::hide :pull-right" }}>
      <button {{action 'upload' 'close'}} type="button" class="close" aria-hidden="true">&times;</button>
      {{file-uploader path=path uploader=uploader class=" upload-area pull-right" alert='showAlert'}}
    </div>

    <div {{bind-attr class="isUploading:hide: :pull-right :uploadwrap" }}>
      <button type="button" {{action 'upload' 'open'}} {{bind-attr class=":btn :btn-default :btn-sm :pull-right"}}>
        <i class="fa fa-upload"></i> Upload
      </button>
    </div>

    {{!-- MKDIR --}}
    {{mkdir-input create="mkdir" path=path}}

    </div>
  </div>

  <div class="panel-body">
    <h4 class="i-am-in pull-left"> <i class="fa fa-folder fa-lg"></i>
    {{#rename-input file=path confirm='renameDir' isRenaming=isRenaming class='renameable stocked half'}}
      <a href="#" class="dir-name" {{action 'refreshDir'}}>{{currentDir}}</a>
      <a href="#" {{bind-attr class="isRootDir:hide"}} {{action 'showRenameInput'}}><i class="fa fa-edit"></i></a>
    {{/rename-input}}
    </h4>

    <div class="input-group input-group-sm input-group-search">
      {{input valueBinding='searchString' class="form-control input-search" placeholder="Search File Names" }}
      {{#if searchString}}
        <i {{action 'clearSearchField'}} class="fa fa-times form-control-feedback"></i>
      {{/if}}
      <div class="input-group-addon"><i class="fa fa-search"></i></div>
    </div>
  </div>

  <table class="table table-hover table-files">
    <thead>
      <tr>
        <th class="icon"></th>
        <th class="path" {{action 'sort' 'name'}}> Name {{sort-arrow sPs=sortProperties sA=sortAscending sP='name'}} </th>
        <th class="size" {{action 'sort' 'size'}}>Size {{sort-arrow sPs=sortProperties sA=sortAscending sP='size'}}</th>
        <th class="owner" {{action 'sort' 'owner'}}>Owner {{sort-arrow sPs=sortProperties sA=sortAscending sP='owner'}}</th>
        <th class="grp" {{action 'sort' 'group'}} >Group {{sort-arrow sPs=sortProperties sA=sortAscending sP='group'}}</th>
        <th class="perm" {{action 'sort' 'permission'}} >Permission {{sort-arrow sPs=sortProperties sA=sortAscending sP='permission'}}</th>
        <th class="download">
          <div class="btn-group btn-sort pull-right" data-toggle="tooltip" data-placement="left" title="Sort by:">
            <button type="button" class="btn btn-xs btn-default" {{action 'sort' 'toggle'}}>
            {{#if sortAscending}} Asc {{else}} Desc {{/if}}
            </button>

            <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
              <span>
              {{capitalize sortProperties.firstObject}}
              </span>
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#" {{action 'sort' 'name'}} >Name</a></li>
              <li><a href="#" {{action 'sort' 'size'}} >Size</a></li>
              <li><a href="#" {{action 'sort' 'owner'}} >Owner</a></li>
              <li><a href="#" {{action 'sort' 'group'}} >Group</a></li>
              <li><a href="#" {{action 'sort' 'permission'}} >Permission</a></li>
              <li><a href="#" {{action 'sort' 'date'}} >Date</a></li>
            </ul>
          </div>
        </th>
        <th class="check">
        {{#dropdown-wrap}}
          <div id="bulkDropdown" class="btn-group">
            <span class="input-group-addon">
              <div class="checkbox">
                {{bulk-checkbox content=fileList}}
              </div>
            </span>
            <button  type="button" data-toggle="dropdown" {{bind-attr class=":btn :btn-xs :btn-default :dropdown-toggle isSelected::disabled"}} >
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu pull-right" role="menu">
              <li><a href="#"  {{action 'download' 'zip'}} ><i class="fa fa-archive fa-fw"></i> Download zip</a></li>
              {{#if canConcat}}
              <li><a href="#"  {{action 'download' 'concat'}} ><i class="fa fa-th fa-fw"></i> Concat</a></li>
              {{/if}}
              <li class="divider"></li>
              <li class="dropdown-submenu">
                <a href="#" disabled="disabled">
                  <i class="fa fa-chevron-left fa-gr fa-fw"></i> Delete
                </a>
                <ul class="dropdown-menu left-submenu">
                  {{confirm-delete confirm="deleteFile" deleteForever=true selector='bulkDropdown'}}
                  {{confirm-delete confirm="deleteFile" deleteForever=false selector='bulkDropdown'}}
                </ul>
              </li>
            </ul>
          </div>
        {{/dropdown-wrap}}
      </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><i class="fa fa-folder"></i></td>
        <td  {{action 'dirUp'}} colspan="7">
          <strong> .. </strong>
        </td>
      </tr>
      <tr class="error-row">
        <td colspan="8" class="danger">
          {{outlet error}}
        </td>
      </tr>
      {{#unless hideMoving}}
      {{#if movingFile}}
        <tr class="isMoving">
          <td>
            {{#if movingFile.isDirectory}}
            <i class="fa fa-folder"></i>
            {{else}}
            <i class="fa fa-file"></i>
            {{/if}}
          </td>
          <td>
            <div class="file-name">
                <span>
                  <a>
                  {{movingFile.name}}
                  </a>
                </span>
                <span class="help-block mod-time">
                  <small>
                    Updated {{showDateUnix movingFile.modificationTime 'YYYY-MM-DD HH:mm'}}
                  </small>
                </span>
              </div>
          </td>
          <td>
            {{#unless content.isDirectory}}
              {{humanSize movingFile.len}}
            {{/unless}}
          </td>
          <td >{{movingFile.owner}}</td>
          <td>{{movingFile.group}}</td>
          <td>{{movingFile.permission}}</td>
          <td >
            <ul class="list-inline file-actions text-right">
              <li>
                <a href="#" {{action 'moveFile' 'move'}} data-toggle="tooltip" data-placement="bottom" title="Paste"><i class="fa fa-clipboard fa-lg"></i></a>
              </li>
            </ul>
          </td>
          <td >
            <a href="#" {{action 'moveFile' 'cancel' }} data-toggle="tooltip" data-placement="bottom" title="Cancel moving"> <i class="fa fa-times fa-lg"></i> </a>
          </td>
        </tr>
      {{/if}}
      {{/unless}}
    </tbody>
    {{#unless isLoadingFiles}}
      {{cloaked-collection
          cloakView="file"
          content=fileList
          itemController="file"
          loadingHTML='<td colspan="8" class="text-center"><i class="fa fa-refresh"></i></td>'
          tagName='tbody'
          defaultHeight='47'}}
    {{else}}
      <tbody>
        <td colspan="8" class="text-center"><i class="fa fa-refresh fa-spin"></i></td>
      </tbody>
    {{/unless}}
    <tbody>
      {{#unless fileList}}
        <tr {{bind-attr class="isLoadingFiles:hide"}} >
          <td colspan="8">
            No files
          </td>
        </tr>
      {{/unless}}
    </tbody>
  </table>
  {{context-menu target=targetContextMenu}}
  {{outlet modal}}
</div>
