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

	export let data;
</script>

<div class="h-screen v-screen flex flex-col">
	<div class="flex flex-col h-full">
		<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 class="h-full grow overflow-scroll">
			<slot />
		</div>
		<div class="flex-none">
			<footer class="justify-end">
				<div class="bg-gray-100">
					<div class="mx-auto max-w-7xl px-6 lg:px-8">
						<div class="flex justify-between divide-x divide-gray-900/5 border-x border-gray-900/5">
							<a
								href="/list"
								class="px-4 py-1 -ml-4 flex items-center justify-center gap-x-2.5 text-sm font-semibold leading-6 text-gray-500 hover:bg-gray-200 hover:text-gray-700"
							>
								&copy; 2023 Innovation Hub Niedersachen
							</a>
							<a
								href="/"
								class="px-4 py-1 flex items-center justify-center gap-x-2.5 text-sm font-semibold leading-6 text-gray-500 hover:bg-gray-200 hover:text-gray-700"
							>
								back
							</a>
							<a
								href="/"
								class="px-4 py-1 -mr-4 flex items-center justify-center gap-x-2.5 text-sm font-semibold leading-6 text-gray-500 hover:bg-gray-200 hover:text-gray-700"
							>
								<svg
									xmlns="http://www.w3.org/2000/svg"
									fill="none"
									viewBox="0 0 24 24"
									stroke-width="1.5"
									stroke="currentColor"
									class="w-6 h-6"
								>
									<path
										stroke-linecap="round"
										stroke-linejoin="round"
										d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"
									/>
								</svg>
								{data.user.id}
							</a>
						</div>
					</div>
				</div>
			</footer>
		</div>
	</div>
</div>
