main.flex.column.light-bg
  .meta
    p.file-name(ng-if="vm.file.name") {{ vm.file.name }}

    p.file-caption(ng-if="vm.file.caption") {{ vm.file.caption }}

  .content.flex.flex-grow
    .previous.flex
      a.arrow-previous(ng-class="{invisible: !vm.prevFile}" ng-click="vm.viewPrevious()")
        button.clean.icon.arrow

    .image-container.flex-grow(ng-class="{ 'small' : !vm.largeImage, 'fit' : vm.largeImage && !vm.zoom, 'full elevated': vm.largeImage && vm.zoom }")
      img.preview(ng-if="vm.isImage()" ng-src="{{vm.file.url}}" ng-click="vm.toggleZoom()" ng-class="{ 'elevated': !vm.largeImage || (vm.largeImage && !vm.zoom) }")

      a.preview.file.flex.center.middle(ng-if="!vm.isImage()" href="{{vm.file.url}}" target="_blank")
        img(ng-src=require('../images/file-icon.svg'))

    .next.flex
      a.arrow-next(ng-class="{invisible: !vm.nextFile}" ng-click="vm.viewNext()")
        button.clean.icon.arrow.right

  ul.thumbnails
    li.thumbnail(ng-repeat="file in vm.files" ng-class="{ elevated: !vm.isCurrent(file) }")
      button.clean(ng-click="vm.selectFile(file)")
        img(ng-src="{{ file.url }}" ng-if="vm.isImage(file)")

        a.preview-container.flex.middle.center(ng-if="!vm.isImage(file)")
          img(ng-src=require('../images/file-icon.svg'))

        .notification.absolute(ng-if="file.unreadMessages > 0 && vm.showNotifications") {{ file.unreadMessages }}