<section class="user-scopes">
  <header class="user-scopes-header">
    <p class="crumbs">
      <a routerLink="/users">← Back to users</a>
    </p>
    <h1 class="title">User scopes</h1>
    @if (page(); as p) {
    <p class="intro">
      Managing scopes for <strong>{{ p.user.displayName }}</strong> ({{ p.user.email ?? '—' }},
      <code>{{ p.user.oid }}</code>). Every grant emits <code>admin.scope_granted</code> and every
      revoke emits <code>admin.scope_revoked</code> — scope-management is itself auditable per
      ADR-0013.
    </p>
    }
  </header>

  <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>
    }
  </div>

  @if (page(); as p) {
  <section class="scopes-section" aria-labelledby="current-scopes-h">
    <h2 id="current-scopes-h" class="section-heading">Current scopes</h2>
    @if (p.scopes.length === 0) {
    <p class="empty">No scopes granted to this user yet.</p>
    } @else {
    <div class="table-wrap">
      <table class="scopes-table">
        <thead>
          <tr>
            <th scope="col">Scope</th>
            <th scope="col">Source</th>
            <th scope="col">Granted</th>
            <th scope="col">Expires</th>
            <th scope="col"><span class="sr-only">Actions</span></th>
          </tr>
        </thead>
        <tbody>
          @for (scope of p.scopes; track scope.id) {
          <tr>
            <td class="cell-scope">
              <code>{{ formatScope(scope.kind, scope.value) }}</code>
            </td>
            <td class="cell-source">{{ scope.source }}</td>
            <td class="cell-timestamp">{{ formatTimestamp(scope.createdAt) }}</td>
            <td class="cell-timestamp">{{ formatTimestamp(scope.expiresAt) }}</td>
            <td class="cell-actions">
              <button
                type="button"
                class="btn btn--danger"
                (click)="revoke(scope.id, formatScope(scope.kind, scope.value))"
              >
                Revoke
              </button>
            </td>
          </tr>
          }
        </tbody>
      </table>
    </div>
    }
  </section>

  <section class="grant-section" aria-labelledby="grant-h">
    <h2 id="grant-h" class="section-heading">Grant a new scope</h2>
    <form class="grant-form" (submit)="$event.preventDefault(); grant()">
      <div class="grant-grid">
        <label class="field">
          <span class="field-label">Kind</span>
          <select
            name="kind"
            [ngModel]="newKind()"
            (ngModelChange)="newKind.set($event)"
            [disabled]="submitting()"
          >
            @for (kind of scopeKinds; track kind) {
            <option [value]="kind">{{ kind }}</option>
            }
          </select>
        </label>
        <label class="field" [class.field--hidden]="!needsValue()">
          <span class="field-label">Value</span>
          <input
            type="text"
            name="value"
            [ngModel]="newValue()"
            (ngModelChange)="newValue.set($event)"
            [disabled]="submitting() || !needsValue()"
            placeholder="0330800013 / 33 / 75"
            [attr.aria-required]="needsValue() ? 'true' : 'false'"
            [attr.aria-describedby]="needsValue() ? 'value-hint' : null"
          />
          @if (needsValue()) {
          <span id="value-hint" class="field-hint">
            For etablissement: Structure.code. For delegation: dept code (33, 2A). For region: INSEE
            region code (75).
          </span>
          }
        </label>
        <label class="field">
          <span class="field-label">Expires at (optional)</span>
          <input
            type="datetime-local"
            name="expiresAt"
            [ngModel]="newExpiresAt()"
            (ngModelChange)="newExpiresAt.set($event)"
            [disabled]="submitting()"
          />
        </label>
      </div>
      @if (submitError(); as msg) {
      <p class="submit-error" role="alert">{{ msg }}</p>
      }
      <div class="grant-actions">
        <button type="submit" class="btn btn--primary" [disabled]="submitting()">
          @if (submitting()) { Granting… } @else { Grant }
        </button>
      </div>
    </form>
  </section>
  }
</section>
