<div class="header">
  <div class="title">
    <div class="submenu">
      <a  ng-click="openDialog()" os-perms="mediafiles.can_upload" class="btn btn-primary btn-sm">
        <i class="fa fa-plus fa-lg"></i>
        <translate>New</translate>
      </a>
    </div>
    <h1 translate>Files</h1>
  </div>
</div>

<div class="meta" os-perms="core.can_manage_projector">
  <div class="title" ng-click="isMeta = !isMeta">
    <div class="name">
      <i class="fa fa-play-circle"></i>
      <translate>Presentation control elements</translate>
    </div>
    <div class="icon">
      <i class="fa fa-lg" ng-class="isMeta ? 'fa-angle-down' : 'fa-angle-up'"></i>
    </div>
  </div>
  <div class="detail" uib-collapse="isMeta">
    <!-- mediafile pdf controls -->
    <div class="row">
      <div class="col-md-12">
        <div ng-repeat="presentedMediafile in presentedMediafiles">
          <h3>{{ getTitle(presentedMediafile) }}</h3>
          <!-- PDF -->
          <nav ng-show="getType(presentedMediafile) === 'pdf'" ng-class="getNavStyle(scroll)" class="form-inline">
            <div class="btn-group">
              <button class="btn btn-default" ng-click="mediafileGoToPage(presentedMediafile, presentedMediafile.page - 1)"
                  ng-class="{ 'disabled': (presentedMediafile.page - 1) < 1 }"
                  title="{{ 'Previous page' | translate }}">
                <i class="fa fa-backward"></i>
              </button>
              <button class="btn btn-default" ng-click="mediafileGoToPage(presentedMediafile, presentedMediafile.page + 1)"
                  ng-class="{ 'disabled': (presentedMediafile.page + 1) > presentedMediafile.numPages }"
                  title="{{ 'Next page' | translate }}">
                <i class="fa fa-forward"></i>
              </button>
            </div>
            <div class="input-group">
              <span class="input-group-addon" translate>Page</span>
              <input type="number" min=1 ng-model="presentedMediafile.page" class="form-control" style="width: 80px"
                  ng-change="mediafileGoToPage(presentedMediafile, presentedMediafile.page)">
              <span class="input-group-addon"><translate>of</translate> {{presentedMediafile.numPages}}</span>
            </div>
            <div class="btn-group">
              <button class="btn btn-default" ng-click="mediafileRotate(presentedMediafile)"
                  title="{{ 'Rotate clockwise' | translate }}">
                <i class="fa fa-repeat"></i>
              </button>
            </div>
            <div class="btn-group">
              <button class="btn btn-default" ng-click="mediafileZoomOut(presentedMediafile)"
                  title="{{ 'Zoom out' | translate }}">
                <i class="fa fa-search-minus"></i>
              </button>
              <button class="btn" ng-click="mediafileFit(presentedMediafile)"
                  title="{{ 'Reset zoom' | translate }}"
                  ng-class="presentedMediafile.scale=='page-fit' ? 'btn-primary' : 'btn-default'">
                <i class="fa fa-undo"></i>
              </button>
              <button class="btn btn-default" ng-click="mediafileZoomIn(presentedMediafile)"
                  title="{{ 'Zoom in' | translate }}">
                <i class="fa fa-search-plus"></i>
              </button>
            </div>
          </nav>

          <!-- Image -->
          <nav ng-show="getType(presentedMediafile) === 'image'" ng-class="getNavStyle(scroll)" class="form-inline">
            <div class="btn-group">
              <button class="btn btn-default" ng-click="mediafileToggleFullscreen(presentedMediafile)"
                  title="{{ 'Toggle fullscreen' | translate }}"
                  ng-class="presentedMediafile.fullscreen ? 'btn-primary' : 'btn-default'">
                <i class="fa fa-arrows-alt"></i>
              </button>
            </div>
            <div class="btn-group">
              <button class="btn btn-default" ng-click="mediafileRotate(presentedMediafile)"
                  title="{{ 'Rotate clockwise' | translate }}">
                <i class="fa fa-repeat"></i>
              </button>
            </div>
          </nav>

          <!-- Video -->
          <nav ng-show="getType(presentedMediafile) === 'video'" ng-class="getNavStyle(scroll)" class="form-inline">
            <div class="btn-group">
              <button class="btn btn-default" ng-click="mediafileToggleFullscreen(presentedMediafile)"
                  title="{{ 'Toggle fullscreen' | translate }}"
                  ng-class="presentedMediafile.fullscreen ? 'btn-primary' : 'btn-default'">
                <i class="fa fa-arrows-alt"></i>
              </button>
            </div>
            <div class="btn-group">
              <button class="btn btn-default" ng-click="mediafileTogglePlaying(presentedMediafile)"
                  title="{{ 'Start/stop video' | translate }}">
                <i class="fa" ng-class="presentedMediafile.playing ? 'fa-stop' : 'fa-play'"></i>
              </button>
            </div>
          </nav>
        </div>
        <div ng-show="!presentedMediafiles.length" class="spacer">
          <i translate>No media file projected.</i>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="details">
  <div class="row form-group">
    <div class="col-sm-6">
      <form class="form-inline">
        <!-- select mode -->
        <button os-perms="mediafiles.can_manage" class="btn btn-sm"
            ng-class="$parent.isSelectMode ? 'btn-primary' : 'btn-default'"
            ng-click="$parent.isSelectMode = !$parent.isSelectMode; uncheckAll()">
          <i class="fa fa-check-square-o"></i>
          <translate>Select ...</translate>
        </button>
      </form>
    </div>
    <div class="col-sm-6"></div>
  </div>
  <div uib-collapse="!isSelectMode" class="row spacer">
    <div class="col-sm-12 text-left">
      <!-- delete button -->
      <a ng-show="isSelectMode"
          os-perms="mediafiles.can_manage" ng-click="deleteMultiple()"
          class="btn btn-default btn-sm btn-danger">
        <i class="fa fa-trash fa-lg"></i>
        <translate>Delete selected mediafiles</translate>
      </a>
    </div>
  </div>

  <div class="spacer-top-lg italic row">
    <div class="col-md-6">
      {{ mediafilesFiltered.length }} /
      {{ mediafiles.length }} {{ "files" | translate }}<span ng-if="(mediafiles|filter:{selected:true}).length > 0">,
      {{(mediafiles|filter:{selected:true}).length}} {{ "selected" | translate }}</span>
    </div>
    <div class="col-md-6" ng-show="mediafilesFiltered.length > pagination.itemsPerPage">
      <span class="pull-right">
        <translate>Page</translate> {{ pagination.currentPage }} /
        {{ Math.ceil(mediafilesFiltered.length/pagination.itemsPerPage) }}
      </span>
    </div>
  </div>

  <div id="mediafile-table" class="os-table container-fluid">
    <div class="row header-row">
      <div class="col-xs-1 centered" ng-show="isSelectMode" os-perms="mediafiles.can_manage">
        <i class="fa text-danger pointer" ng-class="selectedAll ? 'fa-check-square-o' : 'fa-square-o'"
          ng-click="checkAll()"></i>
      </div>
      <div class="col-xs-11 main-header">
        <span class="form-inline text-right pull-right">
          <!-- reset Filters -->
          <span class="sort-spacer pointer" ng-click="filter.reset(isSelectMode)"
            ng-if="filter.areFiltersSet()" ng-disabled="isSelectMode"
            ng-class="{'disabled': isSelectMode}">
            <i class="fa fa-times-circle"></i>
            <translate>Filter</translate>
          </span>
          <!-- boolean Filters -->
          <span ng-repeat="(name, booleanFilter) in filter.booleanFilters"
            ng-if="!booleanFilter.needExtraPermission || operator.hasPerms('mediafiles.can_see_hidden')" uib-dropdown>
            <span class="pointer" id="dropdown{{ name }}" uib-dropdown-toggle
              ng-class="{'bold': booleanFilter.value !== undefined, 'disabled': isSelectMode}"
              ng-disabled="isSelectMode">
              {{ booleanFilter.displayName | translate }}
              <span class="caret"></span>
            </span>
            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown{{ name }}">
              <li>
                <a href ng-click="booleanFilter.value = (booleanFilter.value ? undefined : true); filter.save();">
                  <i class="fa" ng-class="{'fa-check': booleanFilter.value === true}"></i>
                  {{ booleanFilter.choiceYes | translate }}
                </a>
              </li>
              <li>
                <a href ng-click="booleanFilter.value = (booleanFilter.value === false) ? undefined : false; filter.save();">
                  <i class="fa" ng-class="{'fa-check': booleanFilter.value === false}"></i>
                  {{ booleanFilter.choiceNo | translate }}
                </a>
              </li>
            </ul>
          </span>
          <!-- dropdown sort -->
          <span uib-dropdown>
            <span class="pointer" id="dropdownSort" uib-dropdown-toggle
              ng-class="{'disabled': isSelectMode}"
              ng-disabled="isSelectMode">
              <translate>Sort</translate>
              <span class="caret"></span>
            </span>
            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownSort">
              <li ng-repeat="option in sortOptions">
                <a href ng-click="sort.toggle(option.name)">
                  {{ option.display_name | translate }}
                  <span class="spacer-right pull-right"></span>
                  <i class="pull-right fa"
                    ng-style="{'visibility': sort.column === option.name ? 'visible' : 'hidden'}"
                    ng-class="sort.reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
                  </i>
                </a>
              </li>
            </ul>
          </span>
          <!-- search field -->
          <span class="form-group">
            <span class="input-group">
              <span class="input-group-addon"><i class="fa fa-search"></i></span>
              <input type="text" ng-model="filter.filterString" class="form-control"
                 placeholder="{{ 'Search' | translate}}" ng-disabled="isSelectMode"
                 ng-change="filter.save()">
            </span>
          </span>
        </span>
        <!-- show all selected multiselectoptions -->
        <span>
          <!-- for all boolean Filters -->
          <span ng-repeat="(name, booleanFilter) in filter.booleanFilters"
            ng-hide="booleanFilter.value === undefined"
            class="pointer spacer-left-lg"
            ng-click="booleanFilter.value = undefined; filter.save();"
            ng-class="{'disabled': isSelectMode}">
            <span class="nobr">
              <i class="fa fa-times-circle"></i>
              {{ booleanFilter.value ? booleanFilter.choiceYes : booleanFilter.choiceNo | translate }}
            </span>
          </span>
        </span>
      </div>
    </div>

    <!-- main table -->
    <div class="row data-row" ng-mouseover="mediafile.hover=true"
      ng-mouseleave="mediafile.hover=false"
      ng-class="{'projected': mediafile.isProjected().length}"
      ng-repeat="mediafile in mediafilesFiltered = (mediafiles
      | hiddenFilter
      | osFilter: filter.filterString : filter.getObjectQueryString
      | filter: {filetype: (filter.booleanFilters.isPdf.value ? 'application/pdf' : (filter.booleanFilters.isPdf.value === false ? '!application/pdf' : ''))}
      | filter: {hidden: filter.booleanFilters.isHidden.value}
      | orderByEmptyLast: sort.column : sort.reverse)
      | limitTo: pagination.itemsPerPage : pagination.limitBegin">

      <!-- select column -->
      <div ng-show="isSelectMode" os-perms="mediafiles.can_manage" class="col-xs-1 centered">
        <i class="fa text-danger pointer" ng-click="mediafile.selected=!mediafile.selected"
        ng-class="mediafile.selected ? 'fa-check-square-o' : 'fa-square-o'"></i>
      </div>
      <!-- projector column -->
      <div class="col-xs-1 centered projector" os-perms="core.can_manage_projector">
        <div class="btn-group" style="min-width:{{ projectors.length > 1 ? '54' : '34' }}px;" uib-dropdown
          ng-if="mediafile.is_presentable"
          uib-tooltip="{{ 'Projector' | translate }} {{ mediafile.isProjected()[0] || '' }}"
          tooltip-enable="mediafile.isProjected().length">
          <button type="button" class="btn btn-default btn-sm"
            ng-click="showMediafile(defaultProjectorId, mediafile)"
            ng-class="{ 'btn-primary': inArray(mediafile.isProjected(), defaultProjectorId)  }">
            <i class="fa fa-video-camera"></i>
          </button>
          <button type="button" class="btn btn-default btn-sm slimDropDown"
            ng-class="{ 'btn-primary': (mediafile.isProjected().length && !inArray(mediafile.isProjected(), defaultProjectorId) ) }"
            ng-if="projectors.length > 1"
            uib-dropdown-toggle>
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" ng-if="projectors.length > 1">
            <li role="menuitem" ng-repeat="projector in projectors | orderBy:'id'">
              <a href="" ng-click="showMediafile(projector.id, mediafile)"
                ng-class="{ 'projected': inArray(mediafile.isProjected(), projector.id)  }">
                <i class="fa fa-video-camera" ng-show="inArray(mediafile.isProjected(), projector.id) "></i>
                {{ projector.name | translate }}
                <span ng-if="defaultProjectorId == projector.id">(<translate>Default</translate>)</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="no-projector-spacer" os-perms="!core.can_manage_projector"></div>
      <!-- main content column -->
      <div class="col-xs-5 content">
        <div class="icon-column"> <!-- horizontal block -->
          <i ng-style="{'visibility': mediafile.hidden ? 'visible' : 'hidden'}" class="fa fa-lock fa-lg"
              title="{{ 'Is hidden' | translate }}"></i>
          <span os-perms="core.can_manage_logos_and_fonts" class="spacer-left">
            <i ng-if="mediafile.isUsedAsLogo()" class="fa fa-picture-o fa-lg"
            title="{{ 'Is used as a logo' | translate }}"></i>
            <i ng-if="mediafile.isUsedAsFont()" class="fa fa-font fa-lg"
              title="{{ 'Is used as a font' | translate }}"></i>
          </span>
        </div>
        <div class="title-column">
          <div> <!-- vertical block -->
            <a ng-href="{{ mediafile.mediafileUrl }}" class="title" target="_blank">{{ mediafile.title_or_filename }}</a>
          </div>
          <div><small>{{ mediafile.uploader.get_full_name() }}</small></div>
          <div os-perms="mediafiles.can_manage" ng-class="{'hiddenDiv': !mediafile.hover}">
            <small>
              <a href="" ng-click="openDialog(mediafile)" translate>Edit</a> &middot;
              <a href="" class="text-danger"
                ng-bootbox-confirm="{{ 'Are you sure you want to delete this file?' | translate }}<br>
                <b>{{ mediafile.title }} [{{ mediafile.mediafile.name }}]</b>"
                ng-bootbox-confirm-action="delete(mediafile)" translate>Delete</a>
            </small>
          </div>
        </div>
      </div>

      <!-- additional content column -->
      <div class="col-xs-4 content" ng-style="{'width': isSelectMode ? 'calc(50% - 120px)' : 'calc(50% - 70px)'}">
        <div style="width: 60%;" class="optional">
          <small>
            <div>
              <i class="fa fa-file"></i> {{ mediafile.filetype }}
              <span ng-if="mediafile.mediafile.encrypted">(<translate>Encrypted</translate>)</span>
            </div>
            <div><i class="fa fa-database"></i> {{ mediafile.filesize }}</div>
            <div><i class="fa fa-upload"></i> {{ mediafile.timestamp | date:'yyyy-MM-dd HH:mm:ss' }}</div>
          </small>
        </div>
        <div style="width: 40%;" class="pull-right optional">
          <!-- Logo placeholder dropdown for manage user -->
          <div os-perms="core.can_manage_logos_and_fonts"
              ng-mouseover="mediafile.logoHover=true"
              ng-mouseleave="mediafile.logoHover=false"
              ng-show="mediafile.canBeUsedAsLogo()">
            <span uib-dropdown>
              <span id="dropdownLogo{{ mediafile.id }}" class="pointer nobr" uib-dropdown-toggle>
                <span uib-tooltip="{{ 'Manage logos' | translate }}" tooltip-class="nobr">
                  <span ng-if="!mediafile.isUsedAsLogo()" ng-show="mediafile.hover">
                    <i class="fa fa-picture-o"></i>
                    <i class="fa fa-plus"></i>
                  </span>
                  <span ng-if="mediafile.isUsedAsLogo()">
                    <span ng-repeat="logo in mediafile.getLogos()">
                      <i class="fa fa-picture-o spacer-right"
                         ng-style="{'visibility': $first ? 'visible' : 'hidden'}"></i>
                      <small>
                        {{ logo.display_name | translate }}<span ng-if="!$last">,</br></span>
                      </small>
                    </span>
                  </span>
                </span>
                <span ng-if="hasProjectorHeaderLogo(mediafile) && mediafile.logoHover"
                    uib-tooltip="{{ 'The projector header should have a default size of 1024x70px. Adapt the image width if you change the projector resolution.' | translate }}">
                  <i class="fa fa-info-circle"></i>
                </span>
                <i class="fa fa-cog fa-lg spacer-left" ng-show="mediafile.logoHover && mediafile.isUsedAsLogo()"></i>
              </span>
              <ul class="dropdown-menu" aria-labelledby="dropdownLogos{{ mediafile.id }}">
                <li ng-repeat="logo in logos">
                  <a href ng-click="mediafile.toggleLogo(logo)">
                    <i class="fa fa-check" ng-if="mediafile.hasLogo(logo)"></i>
                    {{ logo.display_name | translate }}
                  </a>
                </li>
              </ul>
            </span>
          </div>
          <!-- Font placeholder dropdown for manage user -->
          <div os-perms="core.can_manage_logos_and_fonts"
              ng-mouseover="mediafile.fontHover=true"
              ng-mouseleave="mediafile.fontHover=false"
              ng-show="mediafile.canBeUsedAsFont()">
            <span uib-dropdown>
              <span id="dropdownFont{{ mediafile.id }}" class="pointer nobr" uib-dropdown-toggle>
                <span uib-tooltip="{{ 'Manage fonts' | translate }}" tooltip-class="nobr">
                  <span ng-if="!mediafile.isUsedAsFont()" ng-show="mediafile.hover">
                    <i class="fa fa-font"></i>
                    <i class="fa fa-plus"></i>
                  </span>
                  <span ng-if="mediafile.isUsedAsFont()">
                    <span ng-repeat="font in mediafile.getFonts()">
                      <i class="fa fa-font spacer-right"
                         ng-style="{'visibility': $first ? 'visible' : 'hidden'}"></i>
                      <small>
                        {{ font.display_name | translate }}<span ng-if="!$last">,</br></span>
                      </small>
                    </span>
                  </span>
                </span>
                <i class="fa fa-cog fa-lg spacer-left" ng-show="mediafile.fontHover && mediafile.isUsedAsFont()"></i>
              </span>
              <ul class="dropdown-menu" aria-labelledby="dropdownFonts{{ mediafile.id }}">
                <li ng-repeat="font in fonts">
                  <a href ng-click="mediafile.toggleFont(font)">
                    <i class="fa fa-check" ng-if="mediafile.hasFont(font)"></i>
                    {{ font.display_name | translate }}
                  </a>
                </li>
              </ul>
            </span>
          </div>

        </div>
      </div>

    </div><!-- end data row -->
  </div><!-- end os-table -->

  <ul uib-pagination
      ng-show="mediafilesFiltered.length > pagination.itemsPerPage"
      total-items="mediafilesFiltered.length"
      items-per-page="pagination.itemsPerPage"
      ng-model="pagination.currentPage"
      ng-change="pagination.pageChanged()"
      class="pagination-sm"
      direction-links="false"
      boundary-links="true"
      first-text="&laquo;"
      last-text="&raquo;">
  </ul>
</div>
