<script lang="ts">
	import { fly } from 'svelte/transition';
	import type { PageData } from './$types';
	import FeedbackDraft from './FeedbackDraft.svelte';
	import FeedbackSent from './FeedbackSent.svelte';

	export let data: PageData;
</script>

<svelte:head>
	<title>Feedback</title>
	<!-- just in case... -->
	<meta name="robots" content="noindex" />
</svelte:head>

<div class="absolute top-12 grid card w-11/12 xl:w-2/3 2xl:w-1/2 p-6 shadow-lg">
	{#if data.draft}
		<div class="col-[1] row-[1]" transition:fly={{ x: -200, duration: 300 }}>
			<FeedbackDraft
				event={data.event}
				anonymous={data.anonymous}
				on:submit={() => (data.draft = false)}
			/>
		</div>
	{:else}
		<div class="col-[1] row-[1]" transition:fly={{ x: 200, duration: 300 }}>
			<FeedbackSent />
		</div>
	{/if}
</div>
