@if (publicExperience()) {
	<div class="public-shell">
		<header class="public-header">
			<app-brand-mark class="brand-mark" />
			<div>
				<strong>LMNP Organizer</strong>
				<span>Espace candidat sécurisé</span>
			</div>
		</header>
		<main class="public-main">
			@if (routeLoading()) {
				<mat-progress-bar
					class="route-progress"
					mode="indeterminate"
					aria-label="Chargement de la page"
				/>
			}
			@if (routeLoadError()) {
				<div class="route-load-error" role="alert">
					<span>{{ routeLoadError() }}</span>
					<button mat-button type="button" (click)="retryRouteLoad()">Réessayer</button>
				</div>
			}
			<router-outlet />
		</main>
	</div>
} @else 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' || profileCheckStatus() === 'error') {
	<section class="session-state" role="alert">
		<app-brand-mark class="brand-mark" />
		@if (profileCheckStatus() === 'error') {
			<strong>Impossible de charger votre profil bailleur</strong>
			<p>Vérifiez votre connexion puis réessayez.</p>
			<button
				mat-flat-button
				type="button"
				class="primary-action"
				(click)="retryProfileCompletion()"
			>
				Réessayer
			</button>
		} @else {
			<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()) {
	@defer (on immediate) {
		<app-sign-in-page (loginRequested)="login()" />
	} @placeholder {
		<section class="shell-chunk-state" role="status">Chargement de la connexion…</section>
	} @loading {
		<section class="shell-chunk-state" role="status">Chargement de la connexion…</section>
	} @error {
		<section class="shell-chunk-state" role="alert">
			<strong>Impossible de charger la connexion</strong>
			<button mat-button type="button" (click)="reloadPage()">Réessayer</button>
		</section>
	}
} @else {
	<div class="workspace-shell">
		@defer (on immediate) {
			<app-workspace-navigation [userInitial]="userInitial()" (logoutRequested)="logout()" />
		} @placeholder {
			<aside class="navigation-chunk-state" role="status">Chargement de la navigation…</aside>
		} @loading {
			<aside class="navigation-chunk-state" role="status">Chargement de la navigation…</aside>
		} @error {
			<aside class="navigation-chunk-state" role="alert">
				<strong>Impossible de charger la navigation</strong>
				<button mat-button type="button" (click)="reloadPage()">Réessayer</button>
			</aside>
		}

		<main class="workspace-main">
			@if (routeLoading()) {
				<mat-progress-bar
					class="route-progress"
					mode="indeterminate"
					aria-label="Chargement de la page"
				/>
			}
			@if (routeLoadError()) {
				<div class="route-load-error" role="alert">
					<span>{{ routeLoadError() }}</span>
					<button mat-button type="button" (click)="retryRouteLoad()">Réessayer</button>
				</div>
			}
			<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>
}