<script lang="ts">
    import "../../app.css";
    import Header from "./header.svelte";
    import Footer from "./footer.svelte";
    import { onMount } from 'svelte';
    import { dev } from '$app/environment'

	let { children } = $props();

    let scrollObserver = $state(true);

    onMount(()=>{
        let observer = new IntersectionObserver(
            (entries)=>{scrollObserver = entries[0].isIntersecting},
            {rootMargin: "25px",threshold: 0}
        );
        observer.observe(document.getElementById('scroll')!)
    });
</script>

<svelte:head>
    <meta name="theme-color" content="#a1cc66" media="(prefers-color-scheme: light)">
    <meta name="theme-color" content="teal" media="(prefers-color-scheme: dark)">
</svelte:head>

<div id="root">
    <div id="scroll"></div>
    {#if dev}
        <div id='devTicker'>DEV DUILD</div>
    {/if}

    <div class="headerContainer">
        <header class:hide={!scrollObserver}>
            <Header />
        </header>
    </div>

    <div class="mainContainer">
        <main>
            {@render children()}
        </main>

        <Footer />
    </div>

    <div class="u320"></div>
</div>

<style>
    #root {
        display: flex;
        flex-direction: column;
        background-color: var(--back-color);
        transition: background-color 1s;
        min-height: 100vh;
    }

    #devTicker {
        position: fixed;
        top: 0;
        left: 0;
        padding: 6px;
        color: yellow;
        background-color: #0008;
        z-index: 10;
    }

    .headerContainer {
        position: sticky;
        top: 0;
        height: 80px;
        z-index: 1;
        @media(width<1000px) {
            height: 40px;
        }

        & header {
            background-color: var(--theme-color);
            height: 100%;
            transition: height .4s, transform .4s, background-color 1s;
            &.hide {
                height: 40px;
                @media(width<1000px) {
                    transform: translate(0px,-50px);
                }
            }
        }
    }

    .mainContainer {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }
    
    main {
        flex-grow: 1;
    }

    @media(width<320px) {
		.u320 {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 2;
			background: no-repeat center/25% url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAgCAAAAADC94zaAAAAiklEQVQoz62RQQ7EMAgDxxH/f3LdQ9MmNGQPq3JBwsLYRkYUZQIZv+dCFgUAQgFIKxcEoJXN0NhVG8SpD8Sd0g/1s2OlPu107cNDmz2kOGIyoeQ5Xv5KRBmN5BtUKOjaFtXrtbhEbbI+XCUqXEet/Rfitp+u6/4pHEpS/eedb5GdABwbTPzMQDVyAtNNK05J5lfeAAAAAElFTkSuQmCC);
			background-color: white;
			image-rendering: pixelated;
			color: black;
			&::after {
				content: 'This site supports screen sizes larger than 320px';
			}
		}
	}

    @media (scripting: none) {
        .headerContainer{height:40px !important;}
    }
</style>