<section class="users">
  <header class="users-header">
    <h1 class="title">Users</h1>
    <p class="intro">
      Read-only directory of every identity that has signed in to portal-shell or portal-admin per
      <a
        href="https://git.unespace.com/julien/apf_portal/src/branch/main/docs/decisions/0020-portal-admin-app.md"
        rel="noopener"
        target="_blank"
        >ADR-0020</a
      >. Every query run on this page emits an <code>admin.users.query</code> audit row — directory
      access is itself auditable.
    </p>
  </header>

  <form class="filters" (submit)="$event.preventDefault(); search()" aria-labelledby="filters-h">
    <h2 id="filters-h" class="filters-heading">Filters</h2>
    <div class="filters-grid">
      <label class="filter">
        <span class="filter-label">Username starts with</span>
        <input
          type="text"
          name="username"
          [ngModel]="username()"
          (ngModelChange)="username.set($event)"
          placeholder="jane.doe"
        />
      </label>
      <label class="filter">
        <span class="filter-label">Display name contains</span>
        <input
          type="text"
          name="displayName"
          [ngModel]="displayName()"
          (ngModelChange)="displayName.set($event)"
          placeholder="Doe"
        />
      </label>
      <label class="filter">
        <span class="filter-label">Audience</span>
        <select name="audience" [ngModel]="audience()" (ngModelChange)="audience.set($event)">
          <option value="">Any</option>
          <option value="workforce">workforce</option>
          <option value="customer">customer</option>
        </select>
      </label>
      <label class="filter">
        <span class="filter-label">Last seen from</span>
        <input
          type="datetime-local"
          name="lastSeenAtFrom"
          [ngModel]="lastSeenAtFrom()"
          (ngModelChange)="lastSeenAtFrom.set($event)"
        />
      </label>
      <label class="filter">
        <span class="filter-label">Last seen to</span>
        <input
          type="datetime-local"
          name="lastSeenAtTo"
          [ngModel]="lastSeenAtTo()"
          (ngModelChange)="lastSeenAtTo.set($event)"
        />
      </label>
      <label class="filter">
        <span class="filter-label">Page size</span>
        <select name="limit" [ngModel]="limit()" (ngModelChange)="limit.set(+$event)">
          @for (size of pageSizes; track size) {
          <option [value]="size">{{ size }}</option>
          }
        </select>
      </label>
    </div>
    <div class="filters-actions">
      <button type="submit" class="btn btn--primary" [disabled]="loading()">Apply filters</button>
      <button
        type="button"
        class="btn btn--secondary"
        (click)="clearFilters()"
        [disabled]="loading()"
      >
        Reset
      </button>
    </div>
  </form>

  <div class="status-bar" role="status" aria-live="polite">
    @if (loading()) {
    <span class="status-line">Loading…</span>
    } @else if (error(); as msg) {
    <span class="status-line status-line--error">{{ msg }}</span>
    } @else if (page(); as p) {
    <span class="status-line">{{ resultRange() }}</span>
    }
  </div>

  @if (page(); as p) { @if (p.items.length === 0) {
  <p class="empty">No users match the current filters.</p>
  } @else {
  <div class="table-wrap">
    <table class="users-table">
      <thead>
        <tr>
          <th scope="col">Display name</th>
          <th scope="col">Username</th>
          <th scope="col">Audience</th>
          <th scope="col">First seen</th>
          <th scope="col">Last seen</th>
          <th scope="col">OID</th>
          <th scope="col"><span class="sr-only">Actions</span></th>
        </tr>
      </thead>
      <tbody>
        @for (user of p.items; track user.oid) {
        <tr>
          <td class="cell-name">{{ user.displayName }}</td>
          <td class="cell-username">{{ user.username }}</td>
          <td class="cell-aud">
            <span class="aud-badge">{{ user.audience }}</span>
          </td>
          <td class="cell-timestamp">{{ formatTimestamp(user.firstSeenAt) }}</td>
          <td class="cell-timestamp">{{ formatTimestamp(user.lastSeenAt) }}</td>
          <td class="cell-oid">{{ user.oid }}</td>
          <td class="cell-actions">
            <a
              class="btn btn--secondary"
              [routerLink]="['/users', user.oid, 'scopes']"
              [attr.aria-label]="'Manage scopes for ' + user.displayName"
            >
              Manage scopes
            </a>
          </td>
        </tr>
        }
      </tbody>
    </table>
  </div>

  <nav class="pagination" aria-label="Pagination">
    <button
      type="button"
      class="btn btn--secondary"
      (click)="previous()"
      [disabled]="!hasPreviousPage() || loading()"
    >
      Previous
    </button>
    <button
      type="button"
      class="btn btn--secondary"
      (click)="next()"
      [disabled]="!hasNextPage() || loading()"
    >
      Next
    </button>
  </nav>
  } }
</section>
