@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>
}