<div class="text-center" ng-show="!document && !error">
  <span class="fas fa-circle-notch fa-spin"></span>
</div>

<div ng-show="error" class="well-lg">
  <p class="text-center" ng-show="error.status == 404">
    <span class="fas fa-exclamation-triangle"></span>
    {{ 'document.view.not_found' | translate }}
  </p>
  <p class="text-center" ng-show="error.status == 403">
    <span class="fas fa-exclamation-triangle"></span>
    {{ 'document.view.forbidden' | translate }}
  </p>
</div>

<div ng-show="document">
  <div class="pull-right btn-group">
    <button class="btn btn-danger" ng-show="document.writable" ng-click="deleteDocument(document)"><span class="fas fa-trash"></span> {{ 'delete' | translate }}</button>
    <a href="#/document/edit/{{ document.id }}" ng-show="document.writable" class="btn btn-primary"><span class="fas fa-pencil-alt"></span> {{ 'edit' | translate }}</a>
  </div>

  <div class="pull-right dropdown" uib-dropdown>
    <button class="btn btn-default" uib-dropdown-toggle>
      <span class="fas fa-cloud-download-alt"></span>
      {{ 'export' | translate }}
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li>
        <a ng-href="../api/file/zip?id={{ document.id }}">
          <span class="fas fa-download"></span>
          {{ 'document.view.download_files' | translate }}
        </a>
      </li>
      <li>
        <a href ng-click="exportPdf()">
          <span class="fas fa-file-pdf"></span>
          {{ 'document.view.export_pdf' | translate }}
        </a>
      </li>
    </ul>
    &nbsp;
  </div>

	<div class="page-header">
	  <h1>
      {{ document.title }}
      <small uib-tooltip="{{ 'document.last_updated' | translate: { date: document.update_date } }}">{{ document.create_date | date: dateFormat }}
      {{ 'document.view.by_creator' | translate }} <a href="#/user/{{ document.creator }}">{{ document.creator }}</a></small>
    </h1>

	  <p ng-show="document.writable">
	    <button class="btn btn-sm btn-info" ng-click="share()" ng-show="userInfo.username != 'guest'">
        <span class="fas fa-share"></span> {{ 'share' | translate }}
      </button>

      <span ng-repeat="share in document.acls | filter: { 'type': 'SHARE' }">
        <button class="btn btn-default btn-sm" ng-click="showShare(share)">
          <span class="fas fa-check"></span> {{ share.name ? share.name : 'shared' }}
        </button>
      </span>
	  </p>

	  <ul class="list-inline">
	    <li ng-repeat="tag in document.tags">
        <span class="label label-info pointer" ng-click="setSearch('tag:' + tag.name)" ng-style="{ 'background': tag.color }" invert-text-color="{{ tag.color }}">{{ tag.name }}</span>
      </li>
	  </ul>
	</div>

  <div class="row">
    <div class="col-md-9">
      <ul class="nav nav-tabs">
        <li ng-class="{ active: $state.current.name == 'document.view.content' }">
          <a href="#/document/view/{{ document.id }}/content">
            <span class="fas fa-file"></span> {{ 'document.view.content' | translate }}
          </a>
        </li>
        <li ng-class="{ active: $state.current.name == 'document.view.workflow' }">
          <a href="#/document/view/{{ document.id }}/workflow">
            <span class="fas fa-random"></span> {{ 'document.view.workflow' | translate }}
          </a>
        </li>
        <li ng-class="{ active: $state.current.name == 'document.view.permissions' }">
          <a href="#/document/view/{{ document.id }}/permissions">
            <span class="fas fa-user"></span> {{ 'document.view.permissions' | translate }}
          </a>
        </li>
        <li ng-class="{ active: $state.current.name == 'document.view.activity' }">
          <a href="#/document/view/{{ document.id }}/activity">
            <span class="fas fa-tasks"></span> {{ 'document.view.activity' | translate }}
          </a>
        </li>
      </ul>
      <div ui-view="tab"></div>
    </div>
    <div class="col-md-3">
      <div ng-show="document.route_step">
        <p class="page-header page-header-side">
          <span class="fas fa-random"></span>
          {{ 'document.view.workflow_current' | translate }}
        </p>

        <div class="text-center card">
          <p>{{ document.route_step.name }}</p>
          <p>
            <span class="fas fa-exchange-alt" ng-if="document.route_step.type == 'APPROVE'"></span>
            <span class="fas fa-check-circle" ng-if="document.route_step.type == 'VALIDATE'"></span>
            {{ 'workflow_type.' + document.route_step.type | translate }}
            <span class="label label-default"><acl data="document.route_step.target"></acl></span>
          </p>
          <p ng-show="document.route_step.transitionable">
            <textarea ng-model="workflowComment" maxlength="500" class="form-control mb-10"
                      ng-attr-placeholder="{{ 'document.view.workflow_comment' | translate }}"></textarea>
            <span class="btn btn-primary"
                  ng-show="document.route_step.type == 'VALIDATE'"
                  ng-click="validateWorkflow('VALIDATED')">
              {{ 'workflow_transition.VALIDATED' | translate }}
            </span>
            <span class="btn btn-success"
                  ng-show="document.route_step.type == 'APPROVE'"
                  ng-click="validateWorkflow('APPROVED')">
              {{ 'workflow_transition.APPROVED' | translate }}
            </span>
            <span class="btn btn-danger"
                  ng-show="document.route_step.type == 'APPROVE'"
                  ng-click="validateWorkflow('REJECTED')">
              {{ 'workflow_transition.REJECTED' | translate }}
            </span>
          </p>
        </div>
      </div>

      <p class="page-header page-header-side">
        <span class="fas fa-comments"></span>
        {{ 'document.view.comments' | translate }}
      </p>

      <div ng-show="!comments || comments.length == 0" class="text-center text-muted">
        <h1 class="fas fa-comments"></h1>
        <p ng-show="!comments && !commentsError">{{ 'loading' | translate }}</p>
        <p ng-show="comments.length == 0">{{ 'document.view.no_comments' | translate }}</p>
        <p ng-show="!comments && commentsError">{{ 'document.view.error_loading_comments' | translate }}</p>
      </div>

      <div ng-repeat="comment in comments" class="media" style="overflow: hidden">
        <div class="pull-left">
          <img ng-src="https://www.gravatar.com/avatar/{{ comment.creator_gravatar }}?s=40&d=identicon" class="media-object" />
        </div>
        <div class="media-body">
          <strong>{{ comment.creator }}</strong>
          <p>
            {{ comment.content }}<br />
            <span class="text-muted">{{ comment.create_date | timeAgo: dateTimeFormat }}</span>
          <span class="text-muted pull-right btn-link pointer"
                ng-show="document.writable || userInfo.username == comment.creator"
                ng-click="deleteComment(comment)">
            <span class="fas fa-times"></span>
          </span>
          </p>
        </div>
      </div>

      <form ng-submit="addComment()">
        <div class="form-group">
          <label class="sr-only" for="commentInput">{{ 'document.view.add_comment' | translate }}</label>
          <input type="text" class="form-control" id="commentInput" ng-model="comment" ng-attr-placeholder="{{ 'document.view.add_comment' | translate }}">
        </div>
      </form>
    </div>
  </div>
</div>