<script lang="ts">
	import { page } from '$app/state';
</script>

<svelte:head>
	<title>{page.status} · Veille législative Gwadloup</title>
	<meta name="robots" content="noindex" />
</svelte:head>

<div class="erreur">
	<p class="code">{page.status}</p>
	{#if page.status === 404}
		<h1>Pa ni ayen la</h1>
		<p class="explication">
			Cette page n'existe pas — ou n'existe plus. Le texte que vous cherchez a peut-être un
			autre identifiant.
		</p>
	{:else}
		<h1>Sa pa maché</h1>
		<p class="explication">{page.error?.message ?? 'Une erreur est survenue.'}</p>
	{/if}
	<div class="ligne actions">
		<a class="bouton" href="/"><span>Tableau de bord</span></a>
		<a class="bouton bouton-discret" href="/recherche"><span>Rechercher un texte</span></a>
	</div>
	<div class="flag-bar" aria-hidden="true"></div>
</div>

<style>
	.erreur {
		max-width: 48ch;
		margin: var(--space-5) auto;
		text-align: center;
	}
	.code {
		font-family: var(--font-display);
		font-size: 4rem;
		font-weight: 900;
		line-height: 1;
		color: var(--or-oki);
		margin: 0;
	}
	h1 {
		margin-top: var(--space-1);
	}
	.explication {
		color: var(--muted);
	}
	.actions {
		justify-content: center;
		margin-block: var(--space-3);
	}
	.flag-bar {
		max-width: 56px;
		margin-inline: auto;
	}
</style>
