<img src="img/loader.gif" ng-show="!document && !error" />

<div ng-show="error" class="well-lg">
  <p class="text-center" ng-show="error.status == 404">
    <span class="glyphicon glyphicon-warning-sign"></span>
    Document not found
  </p>
  <p class="text-center" ng-show="error.status == 403">
    <span class="glyphicon glyphicon-warning-sign"></span>
    Access forbidden
  </p>
</div>

<div ng-show="document">
	<div class="text-right" ng-show="document.writable">
	  <div class="btn-group dropdown" dropdown>
      <button class="btn btn-default" dropdown-toggle>
        <span class="glyphicon glyphicon-export"></span>
        Export
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li>
          <a ng-href="../api/file/zip?id={{ document.id }}" title="Download all files">
            <span class="glyphicon glyphicon glyphicon-compressed"></span>
            Download files
          </a>
        </li>
        <li>
          <a ng-click="exportPdf()" title="Export document to PDF" class="pointer">
            <span class="glyphicon glyphicon glyphicon-save-file"></span>
            Export to PDF
          </a>
        </li>
      </ul>
	    <button class="btn btn-danger" ng-click="deleteDocument(document)"><span class="glyphicon glyphicon-trash"></span> Delete</button>
	    <a href="#/document/edit/{{ document.id }}" class="btn btn-primary"><span class="glyphicon glyphicon-pencil"></span> Edit</a>
	  </div>
	</div>
	
	<div class="page-header">
	  <h1>
      {{ document.title }} <small>{{ document.create_date | date: 'yyyy-MM-dd' }}
      by <a href="#/user/{{ document.creator }}">{{ document.creator }}</a></small>
      <img ng-if="document" ng-src="img/flag/{{ document.language }}.png" title="{{ document.language }}" />
    </h1>

	  <p ng-show="document.writable">
	    <button class="btn btn-sm btn-info" ng-click="share()">
        <span class="glyphicon glyphicon-share"></span> Share
      </button>

      <span ng-repeat="share in document.acls | filter: { 'type': 'SHARE' }">
        <button class="btn btn-default btn-sm" ng-click="showShare(share)">
          <span class="glyphicon glyphicon-ok"></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" ng-style="{ 'background': 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="glyphicon glyphicon-file"></span> Content
          </a>
        </li>
        <li ng-class="{ active: $state.current.name == 'document.view.permissions' }">
          <a href="#/document/view/{{ document.id }}/permissions">
            <span class="glyphicon glyphicon-user"></span> Permissions
          </a>
        </li>
        <li ng-class="{ active: $state.current.name == 'document.view.activity' }">
          <a href="#/document/view/{{ document.id }}/activity">
            <span class="glyphicon glyphicon-tasks"></span> Activity
          </a>
        </li>
      </ul>
      <div ui-view="tab"></div>
    </div>
    <div class="col-md-3">
      <p class="page-header">
        <span class="glyphicon glyphicon-comment"></span>
        Comments
      </p>

      <div ng-show="!comments || comments.length == 0" class="text-center text-muted">
        <h1 class="glyphicon glyphicon-comment"></h1>
        <p ng-show="!comments && !commentsError">Loading...</p>
        <p ng-show="comments.length == 0">No comments on this document yet</p>
        <p ng-show="!comments && commentsError">Error loading comments</p>
      </div>

      <div ng-repeat="comment in comments" class="media" style="overflow: hidden">
        <div class="pull-left">
          <img ng-src="http://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 | date: 'yyyy-MM-dd' }}</span>
          <span class="text-muted pull-right btn-link"
                ng-show="document.writable || userInfo.username == comment.creator"
                ng-click="deleteComment(comment)">Delete</span>
          </p>
        </div>
      </div>

      <form ng-submit="addComment()">
        <div class="form-group">
          <label class="sr-only" for="commentInput">Email address</label>
          <input type="text" class="form-control" id="commentInput" ng-model="comment" placeholder="Add a comment">
        </div>
      </form>
    </div>
  </div>
</div>