@if (session.status() === 'checking' || session.status() === 'signing-out') {
  <section class="session-state" role="status" aria-live="polite">
    <app-brand-mark class="brand-mark" />
    <mat-spinner diameter="34" />
    <strong>{{
      session.status() === 'signing-out' ? 'Déconnexion…' : 'Vérification de votre session…'
    }}</strong>
  </section>
} @else if (session.status() === 'error') {
  <section class="session-state" role="alert">
    <app-brand-mark class="brand-mark" />
    <strong>Impossible de vérifier votre session</strong>
    <p>Vérifiez votre connexion puis réessayez.</p>
    <button mat-flat-button type="button" class="primary-action" (click)="session.refresh()">
      Réessayer
    </button>
  </section>
} @else if (!session.isLoggedIn()) {
  <app-sign-in-page (loginRequested)="login()" />
} @else {
  <div class="workspace-shell">
    <app-workspace-navigation [userInitial]="userInitial()" (logoutRequested)="logout()" />

    <main class="workspace-main">
      <header class="mobile-header">
        <div class="mobile-brand">
          <app-brand-mark class="brand-mark" />
          <strong>LMNP Organizer</strong>
        </div>
        <div class="compact-avatar">{{ userInitial() }}</div>
      </header>

      <div class="page-container">
        <router-outlet />
      </div>
    </main>
  </div>
}