<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 />
        <div class="balloons">
            <div style=" background-color: var(--background-color)"></div>
        </div>
        <!-- svelte-ignore a11y-click-events-have-key-events -->
        <!-- svelte-ignore a11y-no-static-element-interactions -->

        {#each site.row as row, i}
            <div class="row-wrapper" on:click|stopPropagation>
                <div class="middle-wrapper">
                    <Pagebuilder rowNr="{i}" row="{row}" rows="{site?.row}" siteId="{site?.id}" />
                </div>
            </div>
        {/each}

        {#each Object.values($sites) as site, i}
            <!-- svelte-ignore a11y-click-events-have-key-events -->
            <!-- svelte-ignore a11y-no-static-element-interactions -->
            {#if site.showTeaser}
                <div class="row-wrapper" on:click|stopPropagation>
                    <div class="middle-wrapper">
                        <Teaser site="{site}" index="{i}" />
                    </div>
                </div>
            {/if}
        {/each}
    {/if}
</main>

<style lang="less">
    main {
        min-height: 80vh;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .balloons {
        background-image: url("../../media/balloons.svg");
        background-repeat: repeat-x; /* Horizontal repetition */
        background-size: 150px 140px;
        width: 100%;

        z-index: 10;
        height: 120px;
    }
    .row-wrapper {
        background-color: var(--background-color);
        position: relative;
        height: 100%;
        z-index: 2;
        width: 100%;
        padding-top: min(10vw, 60px);
        & .middle-wrapper {
            width: 100%;
            display: flex;
            justify-content: center;
        }
    }
</style>
