<script lang="ts">
	import { goto } from '$app/navigation';
	import { i18n } from '$lib/i18n';
	import Nav from '$lib/Nav.svelte';
	import { ParaglideJS } from '@inlang/paraglide-sveltekit';
	import { fade } from 'svelte/transition';

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


<ParaglideJS {i18n}>
    <div class="min-h-full fixed w-full bg-gradient-to-b from-sky-100 to-emerald-50 z-30">
    <header class="flex items-center justify-between mb-6 px-6 pt-6 sticky top-0 w-full z-10" in:fade>
        <button class="btn btn-circle btn-primary" onclick={() => {window.history.back()}}>❮</button>
        <h1 class="text-2xl font-bold text-sky-800 drop-shadow-sm">Boundless</h1>
        <div class="w-8"></div>
    </header>
    <div class="fillscreen">
        {@render children()}
    </div>
    <Nav 
      showLabels={false}
      animate={true}
      darkMode={false}
    />        
    </div>
</ParaglideJS>

<style>
    .fillscreen{
        height: calc(100svh - 64px);
    }
</style>