<script lang="ts">
	// Without this file SvelteKit renders its built-in fallback: an unstyled English
	// "500 / Internal Error" with no reload control. That is reachable from any uncaught
	// render or load error, and `ssr = false` means there is nothing else on the page to
	// fall back to. In a `display: standalone` PWA there is also no URL bar, so a guest who
	// hit it had no way back to the app at all for the rest of the evening.
	//
	// Deliberately dependency-free: no stores, no api client, no fetch. Whatever broke may
	// be one of those, and an error page that can itself throw is worse than none.
	import { page } from '$app/state';

	function reload() {
		location.reload();
	}
</script>

<div class="flex min-h-dvh flex-col items-center justify-center gap-6 px-6 text-center">
	<div class="flex flex-col gap-2">
		<p class="font-mono text-xs tracking-widest text-gray-500 uppercase">
			Fehler {page.status}
		</p>
		<h1 class="text-2xl font-semibold text-gray-900 dark:text-gray-50">
			{page.status === 404 ? 'Diese Seite gibt es nicht' : 'Da ist etwas schiefgelaufen'}
		</h1>
		<p class="mx-auto max-w-sm text-gray-600 dark:text-gray-400">
			{page.status === 404
				? 'Der Link stimmt nicht ganz. Geh zurück zur Galerie, dort sind alle Fotos.'
				: 'Die Seite konnte nicht geladen werden. Meistens hilft es, sie neu zu laden.'}
		</p>
	</div>

	<div class="flex flex-col gap-3 sm:flex-row">
		{#if page.status !== 404}
			<button type="button" class="btn btn-primary" onclick={reload}> Neu laden </button>
		{/if}
		<!-- A full document load, not `goto`: if the client-side router is what broke, a
		     client-side navigation would fail exactly the same way. -->
		<a href="/feed" data-sveltekit-reload class="btn btn-secondary"> Zur Galerie </a>
	</div>
</div>
