<script lang="ts">
	import "../app.css";
	import type { Snippet } from "svelte";
	import { ParaglideJS } from "@inlang/paraglide-sveltekit";
	import { i18n } from "$lib/i18n";
	import { languageTag } from "$lib/paraglide/runtime";
	import { page } from "$app/state";
	import * as m from "$lib/paraglide/messages";

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

<svelte:head>
	<title>{m.site_title()}</title>
	<meta name="description" content={m.site_description()} />
</svelte:head>

<ParaglideJS {i18n}>
	<header
		class="fixed z-50 mix-blend-difference p-1 w-full flex justify-between items-start"
	>
		<a href={i18n.resolveRoute("/")} class="text-white text-2xl"
			>schreifuchs.ch</a
		>
		<nav class="flex gap-2 p-2">
			<a
				href={i18n.resolveRoute(i18n.route(page.url.pathname), "de")}
				hreflang="de"
				data-no-translate
				class="text-white hover:underline {languageTag() === 'de'
					? 'font-bold'
					: ''}"
			>
				DE
			</a>
			<a
				href={i18n.resolveRoute(i18n.route(page.url.pathname), "en")}
				hreflang="en"
				data-no-translate
				class="text-white hover:underline {languageTag() === 'en'
					? 'font-bold'
					: ''}"
			>
				EN
			</a>
		</nav>
	</header>
	{@render children?.()}
</ParaglideJS>
