<div class="grid-view dms-file-list" ng-class="{'has-no-tree': !showTree}" ng-controller="DMSFileListCtrl"
  ui-dms-uploader ui-tab-gate>
  <div class="navbar record-toolbar">
    <div class="navbar-inner">
      <div class="container">
        <div class="btn-group pull-left">
          <button class="btn" ng-click="onToggleTree()" tabIndex="-1"><i class="fa fa-bars"></i></button>
        </div>
        <div class="btn-group pull-left">
          <button class="btn btn-primary" ng-click="onNewFolder()" tabIndex="-1" x-translate>New</button>
          <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" tabIndex="-1"><span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="javascript:" ng-click="onNewFolder()" x-translate>Folder</a></li>
            <li class="divider"></li>
            <li><a href="javascript:" ng-click="onNewDoc()" x-translate>Document</a></li>
            <li><a href="javascript:" ng-click="onNewSheet()" x-translate>Spreadsheet</a></li>
            <li class="divider"></li>
            <li><a href="javascript:" ng-click="onUpload()" x-translate>File upload</a></li>
          </ul>
        </div>
        <div class="btn-group pull-left">
          <button class="btn dropdown-toggle" data-toggle="dropdown" ng-disabled="!selection.length" tabIndex="-1" title="{{ 'More actions' | t }}"><i class="fa fa-ellipsis-v"></i></button>
          <ul class="dropdown-menu">
            <li><a href="javascript:" ng-click="onEditFile()" ng-show="canEditFile()" x-translate>Edit...</a></li>
            <li class="divider" ng-show="canEditFile()"></li>
            <li><a href="javascript:" ng-click="onRename()" x-translate>Rename...</a></li>
            <li><a href="javascript:" ng-click="onPermissions()" ng-show="canShare()" x-translate>Permissions...</a></li>
            <li ng-show="canShowRelated()"><a href="javascript:" ng-click="onShowRelated()" x-translate>Attached to...</a></li>
            <li class="divider"></li>
            <li><a href="javascript:" ng-click="onDownload()" x-translate>Download</a></li>
            <li class="divider" ng-if="hasButton('delete')"></li>
            <li ng-if="hasButton('delete')" ng-disabled="!canDelete()">
              <a href="javascript:" ng-click="onDelete()" x-translate>Delete...</a>
            </li>
          </ul>
        </div>
        <div ui-record-pager="no-text" class="pull-right"></div>
        <div ui-filter-box x-handler="this" class="hidden-phone pull-right"></div>
        <ul class="breadcrumb">
          <li><a href="javascript:" ng-click="onFolder()" tabindex="-1"><i class="fa fa-home"></i></a> <span class="divider">/</span></li>
          <li ng-repeat="folder in currentPaths" ng-class="{'active': $last}">
            <span ng-if="$last">{{folder.fileName}}</span>
            <a ng-if="!$last" href="javascript:" ng-click="onFolder(folder)">{{folder.fileName}}</a>
            <span class="divider">/</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="dms-folder-tree" ui-dms-folders></div>
  <div ui-view-grid x-view="schema" x-data-view="dataView" x-handler="this" x-no-filter="true" x-on-init="onGridInit"></div>
  <div ui-dms-details class="dms-details panel x-animate ng-hide" ng-show="showDetails">
    <div class="panel-header">
      <div class="panel-title pull-left">{{details.name}}</div>
      <div class="panel-buttons pull-right">
        <a href='' ng-click="onCloseDetails()"><i class="fa fa-times"></i></a>
      </div>
    </div>
    <div class="panel-body">
      <form class="form-horizontal">
        <label x-translate>Type</label>
        <input type="text" readonly="readonly" class="not-readonly" ng-model="details.type">
        <label x-translate>Owner</label>
        <input type="text" readonly="readonly" class="not-readonly" ng-model="details.owner">
        <label x-translate>Created</label>
        <input type="text" readonly="readonly" class="not-readonly" ng-model="details.created">
        <label x-translate>Modified</label>
        <input type="text" readonly="readonly" class="not-readonly" ng-model="details.updated">
       	<label class="ibox" ng-show="details.canOffline">
       	  <input type="checkbox" ng-model="details.offline" ng-click="onOffline()"/>
          <span class="box"></span>
          <span class="title">Use offline...</span>
        </label>
      </form>
      <hr>
      <div class="tags" ng-show="!showTagEditor">
        <span ng-repeat="tag in details.tags" ng-class="tag.style" class="label">{{tag.name}}</span>
        <a href="" ng-show="details.tags.length" ng-click="onAddTags()"><i class="fa fa-pencil"></i></a>
        <a href="" ng-show="!details.tags.length" ng-click="onAddTags()" x-translate>Add some tags</a>
      </div>
      <div class="tags" ng-show="showTagEditor">
        <div ui-dms-inline-form x-form-name="tagsFormName" x-record="details"></div>
        <a href="" ng-click="onSaveTags()"><i class="fa fa-check"></i></a>
      </div>
    </div>
  </div>
  <div class="dms-file-upload">
    <input type="file" class="upload-input hide" multiple>
    <div class="upload-overlay"></div>
    <div class="upload-dropzone">
      <div class="drop-image">
        <i class="fa fa-upload"></i>
      </div>
      <div class="drop-message" x-translate>Drop your files to start upload.</div>
    </div>
    <div class="upload-list panel" ng-show="uploads.items.length">
      <div class="panel-header">
        <div class="panel-title pull-left" ng-show="uploads.running" x-translate>Uploading files...</div>
        <div class="panel-title pull-left" ng-show="!uploads.running" x-translate>Upload complete</div>
        <div class="panel-buttons pull-right" ng-show="!uploads.running">
          <a href='' ng-click="onCloseUploadFiles()"><i class="fa fa-times"></i></a>
        </div>
      </div>
      <div class="panel-body">
        <div class="upload-list-item" ng-repeat="info in uploads.items">
            <div class="file-name">{{info.file.name}}</div>
            <div class="file-complete hidden-phone">{{info.transfer}}</div>
            <div class="file-progress">
              <div class="progress progress-striped" ng-class="{ active: info.active }"><div class="bar" ng-style="{width: info.progress}"></div></div>
            </div>
            <div class="file-op" ng-show="!info.loaded">
              <a href='' ng-show='info.pending' ng-click='info.abort()' x-translate>Cancel</a>
              <a href='' ng-show='!info.pending' ng-click='info.retry()' x-translate>Retry</a>
            </div>
        </div>
      </div>
    </div>
  </div>
  <div><div ui-dms-tags-popup></div></div>
  <div><div ui-dms-members-popup></div></div>
</div>
