<h1 translate>Upload files</h1>

<div uib-alert ng-show="alert.show" ng-class="'alert-' + (alert.type || 'warning')" close="alert={}">
  {{ alert.msg }}
</div>

<form editable-form name="mediafileForm" ng-submit="upload()" novalidate>
  <div class="form-group" ng-hide="uploading">
    <div id="dropzone" ngf-drop ngf-select ng-model="dropFiles" ngf-drag-over-class="'dragover'" ngf-multiple="true">
      <translate>Drop files into this area OR</translate>
      <a href= ng-disabled="files.length" type="button" ngf-select="addFiles($files)" multiple translate>
        select files
      </a>
    </div>
  </div>

  <div class="form-group" ng-if="files.length">
    <table class="table table-striped table-bordered table-hover">
      <thead>
        <tr>
          <th translate>
            File information
          </th>
          <th translate>
            Title
          </th>
          <th ng-if="!uploading && operator.hasPerms('mediafiles.can_see_hidden')" translate>
            Hidden
          </th>
          <th ng-if="!uploading && operator.hasPerms('mediafiles.can_manage')" translate>
            Uploader
          </th>
          <th ng-if="uploading" translate>
            Upload status
          </th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="file in files">
          <td>
            <div>
              {{ $index+1 }}. {{ file.name }}
              <span class="pull-right pointer" ng-click="removeFile(file.id)">
                <i class="fa fa-times text-danger"></i>
              </span>
            </div>
            <div ng-if="file.type"><i class="fa fa-file"></i> {{ file.type }}</div>
            <div><i class="fa fa-database"></i> {{ file.humanSize }}</div>
            <div ng-if="file.error" class="text-danger">
              {{ file.error }}
            </div>
          </td>
          <td ng-if="!uploading">
            <input type="text" class="form-control" ng-model="file.title">
          </td>
          <td ng-if="uploading">
            {{ file.title }}
          </td>
          <td ng-if="!uploading && operator.hasPerms('mediafiles.can_see_hidden')">
            <i class="fa" ng-class="file.hidden ? 'fa-check-square-o' : 'fa-square-o'"
              ng-click="file.hidden = !file.hidden"></i>
          </td>
          <td ng-if="!uploading && operator.hasPerms('mediafiles.can_manage')">
            <select chosen
                data-ng-model="file.uploader_id"
                ng-options="user.id as user.full_name for user in users"
                allow-single-deselect="true"
                search-contains="true"
                placeholder-text-single="'Select or search a participant ...' | translate"
                no-results-text="'No results available ...' | translate"
                class="form-control">
              <option value=""></option>
            </select>
          </td>
          <td ng-if="uploading">
            <uib-progressbar value="file.progress" animate="false">
              <span class="nobr">{{ file.progress }}%</span>
            </uib-progressbar>
          </td>
        </tr>
      </tbody>
    </table>
  </div>


  <div class="form-field">
    <button type="submit" ng-disabled="files.length === 0 || uploading" class="btn btn-primary" translate>
      Upload
    </button>
    <button type="button" ng-disabled="uploading" ng-click="clear()" class="btn btn-default" translate>
      Clear list
    </button>
    <button type="button" ng-click="close()" class="btn btn-default pull-right" translate>
      Close
    </button>
  </div>
</form>
