<script lang="ts">
	import { fly } from 'svelte/transition';
	import RegistrationComplete from './RegistrationComplete.svelte';
	import Register from './Register.svelte';

	let registered = false;
</script>

<svelte:head>
	<title>Craftattack - Anmeldung</title>
</svelte:head>

<!--the tooltip when not all fields are correctly filled won't completely show if the overflow is hidden-->
<div
	class="absolute top-12 grid card w-11/12 xl:w-2/3 2xl:w-1/2 p-6 shadow-lg"
	class:overflow-hidden={registered}
>
	{#if !registered}
		<div class="col-[1] row-[1]" transition:fly={{ x: -200, duration: 300 }}>
			<Register on:submit={() => (registered = true)} />
		</div>
	{:else}
		<div class="col-[1] row-[1]" transition:fly={{ x: 200, duration: 300 }}>
			<RegistrationComplete on:close={() => (registered = false)} />
		</div>
	{/if}
</div>
