<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;
</script>

<div class="mx-auto max-w-2xl">
	<div class="flex flex-col items-center justify-center w-full">
		<h1 class="text-xl">Vorgang ansehen</h1>
	</div>
	<p class="mt-8 mb-8 text-sm leading-6 text-gray-600">
		Anhand der Vorgangsnummer werden Sie zu den Dateien des Vorgangs weitergeleitet und können sich
		den Vorgang dann ansehen.
	</p>
	<form method="POST">
		<BaseInputField
			id="vorgang-id"
			name="vorgang-id"
			label="Vorgangskennung"
			type="text"
			value={form?.vorgangId}
		/>
		<div class="mt-5">
			<BaseInputField
				id="vorgang-token"
				name="vorgang-token"
				label="Zugangstoken"
				type="text"
				value={form?.vorgangToken}
				error={form?.error?.message}
			/>
		</div>
		<div class="flex justify-end pt-4">
			<Button type="submit"><ArrowRight /></Button>
		</div>
	</form>
</div>
