<script lang="ts">
	import './layout.css';
	import favicon from '$lib/assets/favicon.png';
	import { resolve } from '$app/paths';

	let { children } = $props();
</script>

<svelte:head>
	<title>Zenno Rob Roy</title>
	<link rel="icon" href={favicon} />
</svelte:head>

<div class="flex h-screen flex-col">
	<nav class="mb-4 flex min-w-full bg-mist-300 p-4 shadow-md dark:bg-mist-900">
		<span class="hidden flex-1 md:inline">
			<a href={resolve('/')} class="text-4xl">Zenno Rob Roy</a>
		</span>
		<span class="flex-1 text-center">
			<a href={resolve('/')} class="mx-8 my-1 block font-semibold md:hidden">Zenno Rob Roy</a>
			<a href={resolve('/inherit')} class="mx-8 my-1 inline-block">Inheritance Chance</a>
			<a href={resolve('/spark')} class="mx-8 my-1 inline-block">Spark Chance</a>
			<a href={resolve('/vet')} class="mx-8 my-1 inline-block">My Veterans</a>
			<a href={resolve('/spurt')} class="mx-8 my-1 inline-block">Spurt Speed</a>
			<a href={resolve('/convo')} class="mx-8 my-1 inline-block">Lobby Conversations</a>
		</span>
	</nav>
	<div class="mx-4 grow lg:m-auto lg:max-w-7xl lg:min-w-7xl">
		{@render children()}
	</div>
	<footer class="inset-x-0 bottom-0 mt-8 border-t bg-mist-300 p-4 text-center text-sm md:mt-20 dark:border-none dark:bg-mist-900">
		Umamusume: Pretty Derby tools by <a href="https://zephyrtronium.date/" target="_blank" rel="noopener noreferrer"
			>zephyrtronium</a
		>.<br />
		All game data is auto-generated from the
		<a href="https://git.sunturtle.xyz/zephyr/horse/src/branch/main/doc/README.md" target="_blank" rel="noopener noreferrer"
			>game's local database</a
		>.
	</footer>
</div>
