<p class="well-sm" ng-bind-html="document.description | newline"></p>
<dl class="dl-horizontal">
  <dt ng-if="document.subject">Subject</dt>
  <dd ng-if="document.subject">{{ document.subject }}</dd>
  <dt ng-if="document.identifier">Identifier</dt>
  <dd ng-if="document.identifier">{{ document.identifier }}</dd>
  <dt ng-if="document.publisher">Publisher</dt>
  <dd ng-if="document.publisher">{{ document.publisher }}</dd>
  <dt ng-if="document.format">Format</dt>
  <dd ng-if="document.format">{{ document.format }}</dd>
  <dt ng-if="document.source">Source</dt>
  <dd ng-if="document.source">{{ document.source }}</dd>
  <dt ng-if="document.type">Type</dt>
  <dd ng-if="document.type">{{ document.type }}</dd>
  <dt ng-if="document.coverage">Coverage</dt>
  <dd ng-if="document.coverage">{{ document.coverage }}</dd>
  <dt ng-if="document.rights">rights</dt>
  <dd ng-if="document.rights">{{ document.rights }}</dd>
  <dt>Contributors</dt>
  <dd>
    <span ng-repeat="contributor in document.contributors">
      <span class="btn btn-link btn-xs">
        <a href="#/user/{{ contributor.username }}">
          {{ contributor.username }}
        </a>
      </span>
    </span>
  </dd>
  <dt ng-if="document.relations.length > 0">Relations</dt>
  <dd ng-if="document.relations.length > 0">
    <span ng-repeat="relation in document.relations">
      <span class="btn btn-link btn-xs">
        <a href="#/document/view/{{ relation.id }}">
          {{ relation.title }}
        </a>
      </span>
    </span>
  </dd>
</dl>

<div ng-file-drop drag-over-class="bg-success" ng-multiple="true" allow-dir="false" ng-model="dropFiles"
     accept="image/*,application/pdf,application/zip" ng-file-change="fileDropped($files, $event, $rejectedFiles)">
  <div class="row upload-zone" ui-sortable="fileSortableOptions" ng-model="files">
    <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3 text-center" ng-repeat="file in files">
      <div class="thumbnail" ng-if="file.id">
        <a ng-click="openFile(file)">
          <img class="thumbnail-file" ng-src="../api/file/{{ file.id }}/data?size=thumb" tooltip="{{ file.mimetype }} | {{ file.size | filesize }}" tooltip-placement="top" />
        </a>
        <div class="caption" ng-show="document.writable">
          <div class="pull-left">
            <div class="btn btn-default handle"><span class="glyphicon glyphicon-resize-horizontal"></span></div>
          </div>
          <div class="pull-right">
            <button class="btn btn-danger" ng-click="deleteFile(file)"><span class="glyphicon glyphicon-trash"></span></button>
          </div>
          <div class="clearfix"></div>
        </div>
      </div>

      <div class="thumbnail" ng-if="!file.id">
        <p class="text-center lead">
          {{ file.status }}
        </p>
        <div class="caption">
          <progressbar value="file.progress" class="progress-info active"></progressbar>
        </div>
      </div>
    </div>

    <p class="text-center well-lg" ng-if="files.length == 0">
      <span class="glyphicon glyphicon-move"></span>
      Drag &amp; drop files here to upload
    </p>
  </div>
</div>

<div ui-view="file"></div>