<div class="container page paper-page">
  <div>
    <div class="paper-crumbs">
      <a href="/conferences">Conferences</a> &nbsp;/&nbsp; <span class="here">{{conference.conferenceID}}</span>
    </div>
    <div class="d-flex align-items-end flex-wrap" style="gap: 12px; justify-content: space-between;">
      <div>
        <h1 class="paper-page-title">
          <a ng-href="{{conference.url}}" style="color: var(--color);">{{conference.name}}</a>
        </h1>
        <p class="paper-page-lede" ng-if="conference.url">
          <a ng-href="{{conference.url}}" ng-bind="conference.url"></a>
        </p>
      </div>
      <span class="status-dot-wrap">
        <span class="status-dot" ng-class="{'status-removed': conference.status == 'removed' || conference.status == 'expired', 'status-ready': conference.status == 'ready'}"></span>
        <span ng-bind="conference.status | title"></span>
      </span>
    </div>
    <div class="paper-meta-rule">
      <span>ID <b ng-bind="conference.conferenceID"></b></span>
      <span>From <b>{{conference.startDate | date}}</b></span>
      <span>Ends <b>{{conference.endDate | date}}</b></span>
      <span>Repos <b>{{::conference.repositories.length | number}}</b></span>
      <span>Price <b>{{conference.price || 0 | number}} &euro;</b></span>
    </div>

    <div class="paper-section-eyebrow">Repositories</div>

    <form class="w-100 dashboard-filter-row" aria-label="Repositories" accept-charset="UTF-8">
      <div class="search-wrap">
        <input
          type="search"
          id="search"
          class="form-control"
          aria-label="Find repositories"
          placeholder="Find repositories…"
          autocomplete="off"
          ng-model="search"
        />
      </div>
      <div class="d-flex flex-wrap" style="gap: 8px">
        <div class="dropdown">
          <button
            class="btn 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="anonymizeDate" value="-anonymizeDate" ng-model="orderBy" />
              <label class="form-check-label" for="anonymizeDate">Anonymize Date</label>
            </div>
            <div class="form-check dropdown-item">
              <input class="form-check-input" type="radio" name="sort" id="sortID" value="repoId" ng-model="orderBy" />
              <label class="form-check-label" for="sortID">ID</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>
        </div>

        <div class="dropdown">
          <button
            class="btn 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>
    </form>

    <div class="paper-table paper-table-repos w-100" role="table" aria-label="Repositories">
      <div class="paper-table-head" role="row">
        <div role="columnheader">Repository</div>
        <div role="columnheader">Status</div>
        <div role="columnheader" class="num">Views</div>
        <div role="columnheader">Expires</div>
        <div role="columnheader" aria-label="Actions"></div>
      </div>
      <div
        class="paper-table-row"
        role="row"
        ng-class="{'repo-inactive': repo.status == 'expired' || repo.status == 'removed'}"
        ng-repeat="repo in conference.repositories| filter:repoFiler| orderBy:orderBy as filteredRepositories"
      >
        <div class="cell-anon" role="cell">
          <span class="type-badge type-repo">Repo</span>
          <div class="anon-text">
            <a class="repo-name" ng-href="/r/{{repo.repoId}}" ng-bind="repo.repoId"></a>
            <div class="anon-sub">
              <a href="https://github.com/{{repo.source.fullName}}/" ng-bind="repo.source.fullName"></a><span ng-if="repo.options.update">&nbsp;&middot;&nbsp;<a href="https://github.com/{{repo.source.fullName}}/tree/{{repo.source.branch}}" ng-bind="repo.source.branch"></a></span><span ng-if="!repo.options.update">&nbsp;&middot;&nbsp;@<a href="https://github.com/{{repo.source.fullName}}/tree/{{repo.source.commit}}" ng-bind="repo.source.commit.substring(0, 8)"></a></span>
            </div>
          </div>
        </div>
        <div class="cell-status" role="cell">
          <span class="status-dot" ng-class="{'status-removed': repo.status == 'removed' || repo.status == 'expired', 'status-ready': repo.status == 'ready', 'status-error': repo.status == 'error'}"></span>
          <span ng-bind="repo.status | title"></span>
        </div>
        <div class="cell-views num" role="cell" ng-bind="::repo.pageView | number"></div>
        <div class="cell-expires" role="cell">
          <span ng-if="repo.options.expirationMode !== 'never' && repo.status == 'ready'" ng-bind="repo.options.expirationDate | humanTime"></span>
          <span class="empty-dash" ng-if="!(repo.options.expirationMode !== 'never' && repo.status == 'ready')">&mdash;</span>
        </div>
        <div class="cell-actions" role="cell">
          <div class="dropdown">
            <button
              class="btn btn-icon-dots"
              type="button"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
              aria-label="Actions"
            >
              <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
            </button>
            <div class="dropdown-menu dropdown-menu-right">
              <a class="dropdown-item" href="/anonymize/{{repo.repoId}}">
                <i class="far fa-edit" aria-hidden="true"></i> Edit
              </a>
              <a class="dropdown-item" href="/r/{{repo.repoId}}/">
                <i class="fa fa-eye" aria-hidden="true"></i> View
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="paper-table-empty" ng-if="filteredRepositories.length == 0">
        <i class="fas fa-inbox"></i>
        <span>There is no repository to display.</span>
      </div>
    </div>
  </div>
</div>
