<script lang="ts">
    import '../../app.css'
    import { resolve } from '$app/paths'
    import Grain from './Grain.svelte'
    import { page } from '$app/state'
    const { children } = $props()
</script>

<div class="w-full flex flex-col min-h-screen">
    <div
        class="navbar bg-base-200 shadow-sm sticky top-0 z-100 sm:px-10 flex-wrap justify-between">
        <a href={resolve('/', {})}>
            <Grain logo={true} />
        </a>
        <ul class="menu menu-horizontal">
            <li class="">
                <a class="nav-link" href={resolve('/grain/apropos', {})}
                    >À propos</a>
            </li>
            {#if !page.url.pathname.startsWith('/grain/projet')}
                <li class="">
                    <a
                        class="btn btn-sm btn-outline btn-primary"
                        href={resolve('/grain/projet/[id]', {
                            id: 'nouveau',
                        })}>Je lance ma simulation</a>
                </li>
            {/if}
        </ul>
    </div>
    <div class="flex flex-col flex-1">
        {@render children()}
    </div>

    <footer class="bg-primary h-2"></footer>
</div>
