<script lang="ts">
	import PlayerList from "$lib/components/PlayerList.svelte";
	import type { GameData } from "$lib/GameData.js";
	import type { Listing } from "$lib/Listing";

	const { data } = $props();
	const games = data.games;
	const prettyDate = (date: Date) => {
		return `${date.toLocaleString()}`;
	};
</script>

<h1>Let&#146;s Play Ten Thousand</h1>

<h2>Games</h2>
<div class="game-list">
	{#each games as game}
		{@render GameRow(game)}
	{/each}
</div>

{#snippet GameRow(game: Listing<GameData>)}
	<div class="game-listing">
		<div>{prettyDate(new Date(game.createdAt))}</div>
		<div>
			<PlayerList players={game.data.players} />
		</div>
		<form method="GET" action={`/games/${game.id}`}>
			<input type="submit" value="JOIN" />
		</form>
	</div>
{/snippet}

<style>
	.game-list {
		width: 100%;
	}

	.game-listing {
		display: flex;
		gap: 1rem;
		padding: 0.5rem;
	}

	.game-listing > * {
		flex: auto;
	}

	.game-listing > div:first-child {
		max-width: 12rem;
	}

	form input {
		width: 100%;
		height: 100%;
	}
</style>
