<h1 translate>Files</h1>

<div id="submenu">
  <a ui-sref="mediafiles.mediafile.create" os-perms="mediafiles.can_upload" class="btn btn-primary btn-sm">
    <i class="fa fa-plus fa-lg"></i>
    <translate>New</translate>
  </a>
</div>

<div class="row form-group">
  <div class="col-sm-8"></div>
  <div class="col-sm-4">
    <input type="text" os-focus-me ng-model="filter.search" class="form-control"
        placeholder="{{ 'Filter' | translate}}">
  </div>
</div>

<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr>
      <th ng-click="toggleSort('title')" class="sortable">
        <translate>Title</translate>
        <i class="pull-right fa" ng-show="sortColumn === 'title' && header.sortable != false"
            ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
        </i>
      <th ng-click="toggleSort('filetype')" class="sortable">
        <translate>Filetype</translate>
        <i class="pull-right fa" ng-show="sortColumn === 'filetype' && header.sortable != false"
            ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
        </i>
      <th ng-click="toggleSort('filesize')" class="sortable">
        <translate>Filesize</translate>
        <i class="pull-right fa" ng-show="sortColumn === 'filesize' && header.sortable != false"
            ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
        </i>
      <th ng-click="toggleSort('timestamp')" class="sortable">
        <translate>Upload time</translate>
        <i class="pull-right fa" ng-show="sortColumn === 'timestamp' && header.sortable != false"
            ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
        </i>
      <th ng-click="toggleSort('uploader')" class="sortable">
        <translate>Uploaded by</translate>
        <i class="pull-right fa" ng-show="sortColumn === 'uploader' && header.sortable != false"
            ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
        </i>
      <th os-perms="mediafiles.can_manage core.can_manage_projector" class="minimum">
        <translate>Actions</translate>
  <tbody>
    <tr ng-repeat="mediafile in mediafiles | filter: filter.search |
        orderBy: sortColumn:reverse">
      <td><a ng-href="{{ mediafile.mediafile }}" target="_self">{{ mediafile.title }}</a>
      <td class="optional">{{ mediafile.filetype }}
      <td>{{ mediafile.filesize }}
      <td>{{ mediafile.timestamp }}
      <td>{{ mediafile.uploader }}
      <td os-perms="mediafiles.can_manage core.can_manage_projector" class="nobr">
        <!-- projector, TODO: add link to activate slide -->
        <a href="#TODO" ng-if="mediafile.is_presentable" os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
            title="{{ 'Show' | translate }}">
          <i class="fa fa-video-camera"></i>
        </a>
        <!-- edit -->
        <a ui-sref="mediafiles.mediafile.detail.update({id: mediafile.id })" os-perms="mediafiles.can_manage"
            class="btn btn-default btn-sm"
            title="{{ 'Edit' | translate}}">
          <i class="fa fa-pencil"></i>
        </a>
        <!-- delete -->
        <a ng-click="delete(mediafile)" os-perms="mediafiles.can_manage" class="btn btn-danger btn-sm"
            title="{{ 'Delete' | translate }}">
          <i class="fa fa-trash-o"></i>
        </a>
</table>
