<script lang="ts">
    import Homepage from "../lib/components/pagebuilder/Homepage.svelte"
    import Pagebuilder from "../lib/components/pagebuilder/pagebuilder.svelte"
    import Teaser from "../lib/components/pagebuilder/teaser.svelte"
    import { navigation, sites } from "../lib/stores"
    let site: Site | undefined
    function getHomePage(): Site | undefined {
        let site: Site | undefined = undefined
        Object.values($sites).forEach((element) => {
            if (element.path == "/") site = element
        })
        return site
    }
    $: {
        void $sites
        site = getHomePage()
    }
</script>

<main>
    {#if site != undefined}
        <Homepage />
        {#each site.row as row, i}
            <Pagebuilder rowNr="{i}" row="{row}" rows="{site?.row}" siteId="{site?.id}" />
        {/each}
        {#each Object.values($sites) as site, i}
            {#if site.showTeaser}
                <Teaser site="{site}" index="{i}" />
            {/if}
        {/each}
    {/if}
</main>

<style lang="less">
    main {
        min-height: 80vh;
        width: 100%;
        padding: 0px min(4.5vw, 100px);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: min(10vw, 60px);
    }
</style>
