<section class="audit">
  <header class="audit-header">
    <h1 class="title">Audit log</h1>
    <p class="intro">
      Read-only view of <code>audit.events</code> per
      <a
        href="https://git.unespace.com/julien/apf_portal/src/branch/main/docs/decisions/0013-audit-trail-separated-postgres-append-only.md"
        rel="noopener"
        target="_blank"
        >ADR-0013</a
      >. Every query run on this page emits its own <code>admin.audit.query</code> row — read 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">Event type</span>
        <input
          type="text"
          name="eventType"
          [ngModel]="eventType()"
          (ngModelChange)="eventType.set($event)"
          placeholder="auth.sign_in"
        />
      </label>
      <label class="filter">
        <span class="filter-label">Actor id hash</span>
        <input
          type="text"
          name="actorIdHash"
          [ngModel]="actorIdHash()"
          (ngModelChange)="actorIdHash.set($event)"
          placeholder="64 hex chars"
        />
      </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">Outcome</span>
        <select name="outcome" [ngModel]="outcome()" (ngModelChange)="outcome.set($event)">
          <option value="">Any</option>
          <option value="success">success</option>
          <option value="failure">failure</option>
          <option value="denied">denied</option>
        </select>
      </label>
      <label class="filter">
        <span class="filter-label">Subject prefix</span>
        <input
          type="text"
          name="subjectPrefix"
          [ngModel]="subjectPrefix()"
          (ngModelChange)="subjectPrefix.set($event)"
          placeholder="session:"
        />
      </label>
      <label class="filter">
        <span class="filter-label">From</span>
        <input
          type="datetime-local"
          name="createdAtFrom"
          [ngModel]="createdAtFrom()"
          (ngModelChange)="createdAtFrom.set($event)"
        />
      </label>
      <label class="filter">
        <span class="filter-label">To</span>
        <input
          type="datetime-local"
          name="createdAtTo"
          [ngModel]="createdAtTo()"
          (ngModelChange)="createdAtTo.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 audit events match the current filters.</p>
  } @else {
  <div class="table-wrap">
    <table class="audit-table">
      <thead>
        <tr>
          <th scope="col">Timestamp</th>
          <th scope="col">Event</th>
          <th scope="col">Audience / outcome</th>
          <th scope="col">Actor / subject</th>
          <th scope="col">Trace</th>
          <th scope="col">Payload</th>
        </tr>
      </thead>
      <tbody>
        @for (event of p.items; track event.id) {
        <tr>
          <td class="cell-timestamp">{{ formatTimestamp(event.createdAt) }}</td>
          <td class="cell-event">{{ event.eventType }}</td>
          <td class="cell-aud">
            <span class="aud-badge">{{ event.audience }}</span>
            <span
              class="outcome-badge"
              [class.outcome-badge--success]="event.outcome === 'success'"
              [class.outcome-badge--failure]="event.outcome === 'failure'"
              [class.outcome-badge--denied]="event.outcome === 'denied'"
              >{{ event.outcome }}</span
            >
          </td>
          <td class="cell-actor">
            <div class="actor-hash">{{ event.actorIdHash ?? '(anonymous)' }}</div>
            @if (event.subject; as subject) {
            <div class="subject">{{ subject }}</div>
            }
          </td>
          <td class="cell-trace">{{ event.traceId ?? '—' }}</td>
          <td class="cell-payload">
            @if (event.payload) {
            <details>
              <summary>view</summary>
              <pre>{{ formatPayload(event.payload) }}</pre>
            </details>
            } @else {
            <span class="dim">—</span>
            }
          </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>
