@if (showPlanner()) {
	<div class="app-shell">
		<a class="skip-link" href="#planning-results-title">{{ tr().app.skipToPlan }}</a>
		<header class="app-header">
			<div class="brand">
				<mat-icon aria-hidden="true">beach_access</mat-icon>
				<div>
					<h1>{{ title() }}</h1>
					<p>{{ tr().app.description }}</p>
				</div>
			</div>
			<button
				mat-stroked-button
				type="button"
				class="settings-button"
				aria-haspopup="dialog"
				(click)="openSettings()"
			>
				<mat-icon aria-hidden="true">settings</mat-icon>
				{{ tr().settings.title }}
			</button>
		</header>

		<main class="planner-layout">
			<section class="configuration-panel" aria-labelledby="leave-settings-title">
				<app-user-input></app-user-input>
			</section>
			<section class="results-panel" aria-labelledby="planning-results-title">
				<app-calendar-year></app-calendar-year>
			</section>
		</main>
	</div>
}
<router-outlet></router-outlet>