<script lang="ts">
	import BaseInputField from '$lib/components/BaseInputField.svelte';
	import Button from '$lib/components/Button.svelte';
	import ArrowRight from '$lib/icons/Arrow-right.svelte';

	export let form;
	import { page } from '$app/state';
	import { ROUTE_NAMES } from '../index.js';
	const vorgangToken = page.url.searchParams.get('vorgang');
</script>

{#if vorgangToken}
<div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
	<div class="sm:mx-auto sm:w-full sm:max-w-sm">
		<img class="mx-auto h-10 w-auto" src="/Landeswappen_NI.svg" alt="Landeswappen Niedersachsen" />

		<h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
			Willkommen beim 3D Tatort
		</h2>
	</div>
	<div class="w-full max-w-sm mx-auto">
		<div class="relative mt-5 bg-gray-50 rounded-xl shadow-xl p-3 pt-1">
			<div class="mt-10">

					<form method="POST">
						<input type="hidden" name="vorgang-token" value={vorgangToken} />
						<div class="mt-5">
							<BaseInputField
								id="vorgang-pin"
								name="vorgang-pin"
								label="Zugangs-PIN"
								type="text"
								value={form?.vorgangPIN}
								error={form?.error?.message}
							/>
						</div>
						{#if form?.message}
							<p class="block text-sm leading-6 text-red-900 mt-2">{form.message}</p>
						{/if}

						<div class="flex justify-end pt-4">
							<Button type="submit"><ArrowRight /></Button>
						</div>
					</form>

			</div>
		</div>
	</div>
</div>
{/if}