<div class="row">
  <div class="well col-md-12">
    <div class="page-header">
      <h1>
        {{ document.title }} <small>{{ document.create_date | date: 'yyyy-MM-dd' }}</small>
        <a ng-href="../api/file/zip?id={{ document.id }}&share={{ $stateParams.shareId }}" class="btn btn-default" title="Download all files">
          <span class="glyphicon glyphicon-download-alt"></span>
        </a>
      </h1>
      <ul class="list-inline">
        <li ng-repeat="tag in document.tags"><span class="label label-info" ng-style="{ 'background': tag.color }">{{ tag.name }}</span></li>
      </ul>
    </div>

    <p ng-bind-html="document.description | newline"></p>

    <div class="row" ui-sortable="fileSortableOptions" ng-model="files" ng-show="files.length > 0">
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 text-center" ng-repeat="file in files">
        <div class="thumbnail">
          <a ng-click="openFile(file)">
            <img class="thumbnail-file" ng-src="../api/file/{{ file.id }}/data?size=thumb&share={{ $stateParams.shareId }}" tooltip="{{ file.mimetype }}" tooltip-placement="top" />
          </a>
        </div>
      </div>
     </div>

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