<div class="container page dashboard-page paper-page">
  <div class="row">
    <div class="w-100">
      <div class="paper-crumbs">My work &nbsp;/&nbsp; <span class="here">Pull requests</span></div>
      <div class="d-flex align-items-end justify-content-between flex-wrap" style="gap: 12px;">
        <div>
          <h1 class="paper-page-title">Anonymized <em>pull requests</em></h1>
          <p class="paper-page-lede">Track PR mirrors you&rsquo;ve created and their reviewer traffic.</p>
        </div>
        <div class="d-flex flex-wrap" style="gap: 6px">
          <a href="/anonymize" class="btn btn-ink">
            <i class="fa fa-plus-circle mr-1" aria-hidden="true"></i> Anonymize Repo
          </a>
          <a href="/pull-request-anonymize" class="btn btn-ink">
            <i class="fa fa-plus-circle mr-1" aria-hidden="true"></i> Anonymize PR
          </a>
          <a
            title="Claim the ownership of an existing anonymized repository."
            data-toggle="tooltip"
            data-placement="bottom"
            href="/claim"
            class="btn"
          >
            Claim
          </a>
        </div>
      </div>

      <!-- Search + filters row -->
      <form class="w-100" aria-label="Pull Requests" accept-charset="UTF-8">
        <div class="d-flex flex-column flex-md-row align-items-md-center" style="gap: 8px">
          <div class="flex-grow-1">
            <input
              type="search"
              id="search"
              class="form-control"
              aria-label="Find a pull request..."
              placeholder="Find a pull request..."
              autocomplete="off"
              ng-model="search"
            />
          </div>
          <div class="d-flex flex-wrap" style="gap: 6px">
            <div class="dropdown">
              <button
                class="btn btn-sm dropdown-toggle"
                type="button"
                id="dropdownSort"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false"
              >
                Sort
              </button>
              <div class="dropdown-menu" aria-labelledby="dropdownSort">
                <h6 class="dropdown-header">Select order</h6>
                <div class="form-check dropdown-item">
                  <input class="form-check-input" type="radio" name="sort" id="sortFullName" value="fullName" ng-model="orderBy" />
                  <label class="form-check-label" for="sortFullName">Pull Request</label>
                </div>
                <div class="form-check dropdown-item">
                  <input class="form-check-input" type="radio" name="sort" id="sortAnonymizeDate" value="-anonymizeDate" ng-model="orderBy" />
                  <label class="form-check-label" for="sortAnonymizeDate">Anonymize Date</label>
                </div>
                <div class="form-check dropdown-item">
                  <input class="form-check-input" type="radio" name="sort" id="sortStatus" value="-status" ng-model="orderBy" />
                  <label class="form-check-label" for="sortStatus">Status</label>
                </div>
                <div class="form-check dropdown-item">
                  <input class="form-check-input" type="radio" name="sort" id="sortLastView" value="-lastView" ng-model="orderBy" />
                  <label class="form-check-label" for="sortLastView">Last View</label>
                </div>
                <div class="form-check dropdown-item">
                  <input class="form-check-input" type="radio" name="sort" id="sortPageView" value="-pageView" ng-model="orderBy" />
                  <label class="form-check-label" for="sortPageView">Page View</label>
                </div>
              </div>
            </div>

            <div class="dropdown">
              <button
                class="btn btn-sm dropdown-toggle"
                type="button"
                id="dropdownStatus"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false"
              >
                Status
              </button>
              <div class="dropdown-menu" aria-labelledby="dropdownStatus">
                <h6 class="dropdown-header">Select status</h6>
                <div class="form-check dropdown-item">
                  <input class="form-check-input" type="checkbox" name="sort" id="statusReady" value="ready" ng-model="filters.status.ready" />
                  <label class="form-check-label" for="statusReady">Ready</label>
                </div>
                <div class="form-check dropdown-item">
                  <input class="form-check-input" type="checkbox" name="sort" id="statusExpired" value="expired" ng-model="filters.status.expired" />
                  <label class="form-check-label" for="statusExpired">Expired</label>
                </div>
                <div class="form-check dropdown-item">
                  <input class="form-check-input" type="checkbox" name="sort" id="statusRemoved" value="removed" ng-model="filters.status.removed" />
                  <label class="form-check-label" for="statusRemoved">Removed</label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>

      <!-- Active filter chips -->
      <div class="d-flex flex-wrap mt-2" style="gap: 6px" ng-show="filters.status.ready === false || filters.status.expired === false || filters.status.removed === false">
        <span class="filter-chip" ng-show="!v" ng-repeat="(f, v) in filters.status">
          {{f | title}}
          <button type="button" class="filter-chip-close" aria-label="Remove filter" ng-click="filters.status[f] = true;">
            &times;
          </button>
        </span>
      </div>
    </div>

    <!-- Pull request list -->
    <ul class="repo-list w-100">
      <li
        class="repo-list-item"
        ng-class="{'repo-inactive': pr.status == 'expired' || pr.status == 'removed' || pr.status == 'error'}"
        ng-repeat="pr in pullRequests| filter:pullRequestFilter| orderBy:orderBy as filteredPullRequests"
      >
        <div class="repo-list-item-content">
          <div class="repo-list-item-main">
            <div class="repo-list-item-header">
              <a ng-href="/pr/{{pr.pullRequestId}}" class="repo-name" ng-bind="pr.pullRequestId"></a>
              <span
                class="status-badge"
                ng-class="{'status-removed': pr.status == 'removed' || pr.status == 'expired' || pr.status == 'removing' || pr.status == 'expiring', 'status-preparing': pr.status == 'preparing' || pr.status == 'download', 'status-ready': pr.status == 'ready', 'status-error': pr.status == 'error'}"
              ><span ng-bind="pr.status | title"></span><span
                  ng-if="pr.status == 'error'"
                  ng-bind="': ' + pr.statusMessage"
                ></span></span>
            </div>
            <div class="repo-source">
              <span>
                <i class="fab fa-github" aria-hidden="true"></i>
                <a href="https://github.com/{{pr.source.repositoryFullName}}/pull/{{pr.source.pullRequestId}}">{{pr.source.repositoryFullName}}#{{pr.source.pullRequestId}}</a>
              </span>
              <span
                class="status-badge"
                ng-class="{'status-ready': pr.merged, 'status-removed': pr.state=='open', 'status-error': pr.state=='closed' && !pr.merged}"
                style="font-size: 10px;"
              >
                {{pr.merged ? "merged" : pr.state | title}}
              </span>
              <span class="repo-date">anonymized {{pr.anonymizeDate | humanTime}}</span>
            </div>
          </div>
          <div class="repo-meta">
            <span ng-if="::pr.conference" title="Conference">
              <i class="fas fa-chalkboard-teacher"></i> {{pr.conference}}
            </span>
            <span title="Terms: {{::pr.options.terms.join(', ')}}" data-toggle="tooltip" data-placement="bottom">
              <i class="fas fa-shield-alt"></i> {{::pr.options.terms.length | number}}
            </span>
            <span title="Views: {{::pr.pageView | number}}" data-toggle="tooltip" data-placement="bottom">
              <i class="far fa-eye"></i> {{::pr.pageView | number}}
            </span>
            <span title="Last view: {{::pr.lastView | date}}" data-toggle="tooltip" data-placement="bottom">
              <i class="far fa-calendar-alt"></i> {{::pr.lastView | humanTime}}
            </span>
            <span ng-if="pr.options.expirationMode!='never' && pr.status == 'ready'">
              <i class="far fa-clock"></i> Expire: {{pr.options.expirationDate | humanTime}}
            </span>
          </div>
        </div>
        <div class="repo-list-item-actions">
          <div class="dropdown">
            <button
              class="btn btn-sm dropdown-toggle"
              type="button"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
            >
              Actions
            </button>
            <div class="dropdown-menu dropdown-menu-right">
              <a class="dropdown-item" href="/pull-request-anonymize/{{pr.pullRequestId}}">
                <i class="far fa-edit" aria-hidden="true"></i> Edit
              </a>
              <a class="dropdown-item" href="#" ng-show="pr.status == 'ready' || pr.status == 'error'" ng-click="updatePullRequest(pr)">
                <i class="fas fa-sync"></i> Force update
              </a>
              <a class="dropdown-item" href="#" ng-show="pr.status == 'removed'" ng-click="updatePullRequest(pr)">
                <i class="fas fa-check-circle"></i> Enable
              </a>
              <a class="dropdown-item" href="#" ng-show="pr.status == 'ready'" ng-click="removePullRequest(pr)">
                <i class="fas fa-trash-alt"></i> Remove
              </a>
              <a class="dropdown-item" href="/pr/{{pr.pullRequestId}}/">
                <i class="fa fa-eye" aria-hidden="true"></i> View PR
              </a>
            </div>
          </div>
        </div>
      </li>
      <li class="repo-list-empty" ng-if="filteredPullRequests.length == 0">
        <i class="fas fa-inbox"></i>
        <span>No pull requests to display.</span>
      </li>
    </ul>
  </div>
</div>
