@if (
  session.status() === 'checking' ||
  session.status() === 'signing-out' ||
  (session.isLoggedIn() && profileCheckStatus() === 'checking')
) {
  <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…'
        : profileCheckStatus() === 'checking'
          ? 'Vérification de votre profil…'
          : '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>
}