<script lang="ts">
	import Chevron from '$lib/icons/Chevron-right.svelte';

	export let data;
</script>

<div class="flex flex-col">
	<header class="flex-none relative isolate z-10 bg-white px-8">
		<nav
			class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8"
			aria-label="Global"
		>
			<div class="flex w-48">
				<a href="/" class="-m-1.5 p-1.5 w-10">
					<span class="sr-only">Tatort Niedersachen</span>
					<img class="h-8 w-auto" src="/Landeswappen_NI.svg" alt="Landeswappen Niedersachsen" />
				</a>
			</div>
			<h1 class="text-3xl text-slate-400 font-bold">Tatort</h1>
			<div class="lg:flex lg:justify-end w-48">
				{#if data.user}
					<form method="POST" action="/anmeldung?/logout">
						<input type="hidden" />
						<button type="submit" class="text-sm font-semibold leading-6 text-gray-900"
							><span
								><span class="align-middle inline-block">Abmelden</span><span
									class="align-middle inline-block"><Chevron /></span
								></span
							></button
						>
					</form>
				{/if}
			</div>
		</nav>
	</header>
</div>
