<script lang="ts">
	import type { PageData } from "./$types";

	interface Props {
		data: PageData;
	}

	const props: Props = $props();
</script>

<div class="container">
	<h1>TCL-Guessr</h1>

	<div class="login">
		{#if props.data.user === null}
			<a href="/login">Login</a>
		{:else}
			Logged in as <img
				src={`https://cdn.discordapp.com/avatars/${props.data.user.id}/${props.data.user.avatarHash}.webp?size=32`}
				alt="avatar"
			/> <b>{props.data.user.name}</b> - <a href="logout">Logout</a>
		{/if}
	</div>

	<span class="login"> </span>

	<form action="/game" method="GET">
		<label>
			difficulté: <select name="mode">
				<option value="easy">Facile (pour les nuls)</option>
				<option value="hard">Dur (pour les gigaillards)</option>
				<option value="extreme demon ultra miguel">
					EXTREME DEMON ULTRA MIGUEL DE LA MORT QUI TUE
				</option>
			</select>
		</label>

		<div>
			<label>metro: <input type="checkbox" name="metro" checked /></label>
			<label>tram: <input type="checkbox" name="tram" /></label>
		</div>

		<input type="submit" value="LANCER LA PARTIE" />
	</form>
</div>

<style>
	.container {
		padding: 12px;
	}

	form {
		display: flex;
		flex-direction: column;
		gap: 10px;
		width: fit-content;
	}

	input[type="submit"] {
		height: 50px;
	}
</style>
