<script lang="ts">
    import Sidebar from './Sidebar.svelte';
    import Footer from './Footer.svelte';
    import { setStreamContext, StreamContext } from '$lib/streamContext.svelte.ts';

    // streams are grabbed from the server here, then accessed throughout the rest
    // of the components through the svelte context api
    const { data, children } = $props();
    setStreamContext(new StreamContext(data.streams));
</script>

<div id="mainContainer">
    <div id="sidebar" class="panel"><Sidebar /></div>
    <div id="footer" class="panel-alt"><Footer /></div>
    <div id="content">{@render children?.()}</div>
</div>

<style>
    #mainContainer {
        display: grid;
        grid-template-columns: 25% 1fr;
        grid-template-rows: minmax(0, 1fr) auto;
        height: calc(100vh - 1em); /* fallback */
        height: calc(100dvh - 1em);
        gap: 0.5em;
        margin: 0.5em;
    }

    #footer {
        grid-row: 2;
        grid-column: 1;
        height: 100%;
        scrollbar-width: thin;
    }

    #sidebar {
        grid-row: 1;
        grid-column: 1;
        overflow-wrap: break-word;
        scrollbar-gutter: stable;
        overflow-y: scroll;
        scrollbar-width: thin;
    }

    #content {
        grid-row: 1 / 2;
        grid-column: 2;
        height: calc(100vh - 1em);
        height: calc(100dvh - 1em);
    }

    @media (max-width: 575px) {
        #mainContainer {
            grid-template-columns: 100%;
            grid-template-rows: 65% 1fr auto;
        }

        #footer {
            order: 2;
            order: 2;
            grid-row: 3;
            height: 100%;
        }

        #sidebar {
            order: 1;
            grid-row: 2;
            height: 100%;
        }

        #content {
            order: 0;
            grid-row: 1;
            grid-column: 1;
            height: 100%;
        }
    }
</style>
