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

	export let form;

	export let open = false;

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

<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 action="?/getVorgangByToken" method="POST">
					<BaseInputField
						id="vorgang-token"
						name="vorgang-token"
						label="Vorgangskennung"
						type="text"
						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>
					<div class="flex justify-end pt-4">
						<Button type="submit"><ArrowRight /></Button>
					</div>
				</form>
			</div>
		</div>
		<div class="flex justify-end mt-10 px-3">
			<Button on:click={() => (open = true)}><Login /></Button>
		</div>
	</div>
</div>
<Modal {open}>
	<ModalTitle>Anmelden</ModalTitle>
	<ModalContent class="flex justify-center">
		<form action="?/login" method="POST">
			<div>
				<label for="user" class="text-sm font-medium leading-6 text-gray-900">Kennung</label>
				<div class="mt-2">
					<input
						id="user"
						name="user"
						type="text"
						autocomplete="email"
						required
						class="rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
					/>
				</div>
			</div>

			<div>
				<label for="password" class="block text-sm font-medium leading-6 text-gray-900"
					>Passwort</label
				>
				<div class="mt-2">
					<input
						id="password"
						name="password"
						type="password"
						autocomplete="current-password"
						required
						class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
					/>
				</div>
			</div>

			<div class="flex justify-end">
				<Button type="submit" class="mt-5">Anmelden</Button>
			</div>
		</form>
	</ModalContent>
	<ModalFooter><Button on:click={() => (open = false)}>Ok</Button></ModalFooter>
</Modal>
