<header class="admin-header">
  <a class="brand" routerLink="/">
    <span class="brand-wordmark">APF Portal</span>
    <span class="brand-badge">Admin</span>
  </a>

  <div class="auth-widget">
    @switch (authState().kind) { @case ('loading') {
    <span class="auth-status auth-status--loading" aria-live="polite">…</span>
    } @case ('anonymous') {
    <button type="button" class="btn btn--primary" (click)="signIn()">Sign in</button>
    } @case ('error') {
    <button
      type="button"
      class="btn btn--secondary"
      (click)="signIn()"
      aria-label="Session unavailable — sign in again"
    >
      Sign in
    </button>
    } @case ('authenticated') { @if (authState(); as state) { @if (state.kind === 'authenticated') {
    <span class="avatar" [attr.aria-label]="state.user.displayName">{{ initials() }}</span>
    <span class="auth-name">{{ state.user.displayName }}</span>
    <button type="button" class="btn btn--secondary" (click)="signOut()">Sign out</button>
    } } } }
  </div>
</header>
