<div class="pr-page" ng-init="tabState = { active: (details && details.diff) ? 'diff' : 'comments' }">
  <div class="container paper-page pr-page-inner">
    <div class="paper-crumbs">
      <a href="/dashboard">Reviewer</a> &nbsp;/&nbsp;
      <span class="here">Pull request</span>
    </div>

    <header class="pr-header">
      <h1 class="paper-page-title pr-title">
        <span ng-if="details.title" ng-bind="details.title"></span>
        <span ng-if="!details.title" class="text-muted">Untitled pull request</span>
        <a
          ng-if="options.isAdmin || options.isOwner"
          ng-href="/pull-request-anonymize/{{pullRequestId}}"
          class="btn btn-sm"
          aria-label="Edit"
          ><i class="far fa-edit"></i><span class="d-none d-md-inline"> Edit</span></a
        >
      </h1>
      <div class="pr-header-meta">
        <span class="paper-pill" ng-class="{'good': details.merged, 'warn': details.state == 'open', 'bad': details.state == 'closed' && !details.merged}">
          <span class="status-dot" ng-class="{'status-ready': details.merged, 'status-error': details.state == 'closed' && !details.merged}"></span>
          {{ details.merged ? 'Merged' : (details.state | title) }}
        </span>
        <span class="pr-meta-item" ng-if="details.baseRepositoryFullName">
          <i class="fab fa-github"></i> <span ng-bind="details.baseRepositoryFullName"></span>
        </span>
        <span class="pr-meta-item" ng-if="details.updatedDate">
          <i class="far fa-clock"></i> <span ng-bind="details.updatedDate | date"></span>
        </span>
        <span class="pr-meta-item" ng-if="details.anonymizeDate">
          <i class="fas fa-user-secret"></i> Anonymized <span ng-bind="details.anonymizeDate | date"></span>
        </span>
      </div>
    </header>

    <section class="pr-body-card" ng-if="details.body">
      <div class="paper-section-eyebrow">Description</div>
      <markdown content="details.body"></markdown>
    </section>

    <nav class="paper-tabs" ng-if="details.diff || details.comments" role="tablist">
      <button
        class="paper-tab"
        ng-if="details.diff"
        ng-class="{'active': tabState.active == 'diff'}"
        ng-click="tabState.active = 'diff'"
        type="button"
        role="tab"
      >
        <i class="fas fa-code"></i> Diff
      </button>
      <button
        class="paper-tab"
        ng-if="details.comments"
        ng-class="{'active': tabState.active == 'comments'}"
        ng-click="tabState.active = 'comments'"
        type="button"
        role="tab"
      >
        <i class="far fa-comment-dots"></i>
        <ng-pluralize
          count="details.comments.length"
          when="{'0': 'No comments', 'one': '1 comment', 'other': '{} comments'}"
        ></ng-pluralize>
      </button>
    </nav>

    <div class="paper-tab-content">
      <div ng-if="details.diff && tabState.active =='diff'">
        <div class="pr-diff" ng-bind-html="details.diff | diff"></div>
      </div>

      <div ng-if="details.comments && tabState.active =='comments'">
        <ul class="pr-comments">
          <li class="pr-comment" ng-repeat="comment in details.comments">
            <div class="pr-comment-head">
              <span class="pr-comment-author" ng-if="comment.author">
                <i class="far fa-user"></i> @<span ng-bind="comment.author"></span>
              </span>
              <span class="pr-comment-date" ng-if="comment.updatedDate" ng-bind="comment.updatedDate | date"></span>
            </div>
            <div class="pr-comment-body" ng-if="comment.body">
              <markdown content="comment.body"></markdown>
            </div>
          </li>
          <li class="paper-table-empty" ng-if="!details.comments.length">
            <i class="far fa-comment-dots"></i>
            <span>No comments on this pull request.</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
