<script lang="ts">
	import './layout.css';
	import favicon from '$lib/assets/favicon.svg';
    import { AppBar } from "@skeletonlabs/skeleton-svelte";
    import type { LayoutProps } from "./$types";

    let { data, children }: LayoutProps = $props();
</script>

<svelte:head>
    <link rel="icon" href={favicon} />
</svelte:head>

<div class="grid h-screen grid-rows-[auto_1fr_auto]">
    <header>
        <AppBar>
            <AppBar.Toolbar class="grid-cols-[auto_1fr_auto]">
                <AppBar.Headline>
                    <h1 class="h3">BlackBook</h1> { data.status.options.title }
                </AppBar.Headline>
            </AppBar.Toolbar>
        </AppBar>
    </header>

    <div class="grid grid-cols-1 md:grid-cols-[auto_1fr]">
        <aside class="p-4">SIDEBAR</aside>

        <main class="space-y-4 p-4">
            {@render children()}
        </main>
    </div>

    <footer class="p-4">FOOTER</footer>
</div>
