<script lang="ts" nonce="%sveltekit.nonce%">
    import '../app.scss'
    import { base } from '$app/paths'
    import Grain from './Grain.svelte'
</script>

<div class="app w-100">
    <main>
        <nav class="navbar navbar-expand-lg sticky-sm-top bg-body shadow mb-3">
            <div class="container-md">
                <a class="nav-link" href={base}>
                    <Grain logo={true} />
                </a>
                <div class="d-flex">
                    <ul class="navbar-nav d-flex flex-row align-items-center">
                        <li class="nav-item mx-2">
                            <a class="nav-link" href="{base}/apropos"
                            >À propos</a>
                        </li>
                        <li class="nav-item mx-2">
                            <a
                                class="btn btn-sm btn-outline-primary"
                                href="{base}/projet/nouveau"
                            >Je lance ma simulation</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <style>
            @media (prefers-color-scheme: light) {
                nav {
                    background-color: #f0f0f0 !important;
                }
            }
        </style>
        <div class="d-flex flex-column">
            <slot />
        </div>
    </main>

    <footer>
        <div class="nav-item mt-1 mx-2">
            <a class="nav-link" href="{base}/apropos">À&nbsp;propos</a>
        </div>
    </footer>
</div>

<style lang="scss">
    .sticky-sm-top {
        position: static;
        width: 100%;
    }

    @media (min-width: 480px) {
        .sticky-sm-top {
            position: sticky;
            top: 0;
        }
    }

    .app {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    main {
        font-family: 'Lato', sans-serif;
        flex: 1;
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
    }

    footer {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 8px;
        background-color: $primary;
        z-index: 1;
    }

    :global(.logoCol1) {
        color: $gp-3;
    }

    :global(.logoCol2) {
        color: $gp-2;
    }
</style>