<div class="text-center">
  <div class="btn-group pull-left">
    <button type="button" class="btn btn-default" ng-click="closeFile()" uib-tooltip="Close">
      <span class="fas fa-times"></span>
    </button>
    <button type="button" class="btn btn-default" ng-click="toggleMaximize()" uib-tooltip="{{ isMaximized ? 'Restore Down' : 'Maximize' }}">
      <span class="fas" ng-class="{'fa-expand': !isMaximized, 'fa-compress': isMaximized}"></span>
    </button>
  </div>

  <div class="btn-group">
    <button type="button" class="btn btn-default"
            ng-style="{ 'visibility': previousFile() ? 'visible' : 'hidden' }"
            ng-click="goPreviousFile()">
      {{ 'file.view.previous' | translate }}
    </button>
    <button type="button" class="btn btn-default"
            ng-style="{ 'visibility': nextFile() ? 'visible' : 'hidden' }"
            ng-click="goNextFile()">
      {{ 'file.view.next' | translate }}
    </button>
    <button type="button" class="btn btn-placeholder" style="visibility: hidden">
      &nbsp;
    </button>
  </div>
  
  <div class="btn-group pull-right">
    <button type="button" class="btn btn-default" uib-tooltip="Print this file" tooltip-append-to-body="true" ng-click="printFile()">
      <span class="fas fa-print"></span>
    </button>
    <button type="button" class="btn btn-default" uib-tooltip="Download this file" tooltip-append-to-body="true" ng-click="openFile()">
      <span class="fas fa-download"></span>
    </button>
    <button type="button" class="btn btn-default" uib-tooltip="Show text content" tooltip-append-to-body="true" ng-click="openFileContent()">
      <span class="fas fa-eye"></span>
    </button>
  </div>
</div>

<div class="text-center" style="position: relative;" ng-if="$stateParams.fileId">
  <!-- Standard preview -->
  <img ng-src="../api/file/{{ $stateParams.fileId }}/data?size=web"
       ng-init="error = false"
       img-error="error = true"
       ng-show="!error && canDisplayPreview()" />

  <!-- Media player -->
  <a href class="video-overlay" ng-if="!error && (file.mimetype.substring(0, 6) == 'video/' || file.mimetype.substring(0, 6) == 'audio/')"
     ng-init="videoPlayer = false" ng-click="videoPlayer = true">
    <span class="fas fa-play-circle" ng-if="!videoPlayer"></span>
    <video ng-if="videoPlayer" autoplay="autoplay" loop="loop"
           controls="controls" ng-src="../api/file/{{ $stateParams.fileId }}/data"></video>
  </a>

  <!-- PDF viewer -->
  <pdf-annotation-viewer ng-if="!error && file.mimetype == 'application/pdf'" file-id="$stateParams.fileId" document-id="file.document_id" share-id="$stateParams.shareId" class="pdf-viewer"></pdf-annotation-viewer>

  <!-- File not found -->
  <p class="well-lg" ng-show="error">
    <span class="fas fa-exclamation-triangle"></span>
    {{ 'file.view.not_found' | translate }}
  </p>
</div>
