<script lang="ts">
    import { mediaLibrary, pages } from "../lib/store"
    import Pagebuilder from "../lib/components/pagebuilder/Pagebuilder.svelte"
    import { apiBaseURL, baseURL } from "../config"
    import { onMount } from "svelte"
    import NotFound from "./NotFound.svelte"
    export let path: string = "/"
    export let isHomepage = true
    let page: Content = $pages[path]
    $: page = $pages[path]
    let personPage = false
</script>

<svelte:head>
    {#key page}
        <!-- Title -->
        {#if page?.pageTitle}
            <title>{page.pageTitle}</title>
        {:else if page?.meta?.title}
            <title>{page.meta.title}</title>
        {/if}

        <!-- Description -->
        {#if page?.meta?.description}
            <meta name="description" content="{page.meta.description}" />
        {/if}

        <!-- Keywords -->
        {#if page?.meta?.keywords}
            <meta name="keywords" content="{page.meta.keywords}" />
        {/if}

        {#if page?.active === false}
            <meta name="robots" content="noindex" />
        {/if}
        <link rel="canonical" href="{baseURL + page?.path}" />
    {/key}
</svelte:head>
<div class="rows" class:HP="{path == '/'}">
    {#if page}
        {#each page.rows as row, i}
            <div class="row" id="row-{i}">
                {#if row.backgroundImage && $mediaLibrary[row.backgroundImage]}
                    <div class="background-image">
                        <img
                            src="{`${apiBaseURL}medialib/${row?.backgroundImage}/${
                                $mediaLibrary?.[row?.backgroundImage]?.file?.src
                            }`}"
                            alt="img"
                        />
                    </div>
                {/if}
                <div class="content" class:bright="{row.backgroundImage}">
                    <Pagebuilder
                        isHP="{path == '/'}"
                        {i}
                        {row}
                        {page}
                        pageId="{page.id}"
                        bright="{!!row.backgroundImage}"
                    />
                </div>
            </div>
        {/each}
    {:else}
        <NotFound />
    {/if}
</div>

<style lang="less">
    @import "../lib/assets/css/variables.less";

    .rows {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        width: 100%;
        position: relative;
        max-width: 100vw;
        overflow: hidden;
        gap: 10px;

        & > .row {
            margin: 15px 0px;
            padding: 15px 10px;
            @media @tablet {
                margin: 40px 0px;
                padding: 30px 10px;
            }
            width: 100%;
            position: relative;
            display: flex;
            justify-content: center;

            .background-image {
                position: absolute;
                width: 100%;
                z-index: 1;
                top: 0px;
                bottom: 0px;
                left: 0px;
                right: 0px;
                img {
                    object-fit: cover;
                    width: 100%;
                    height: 100%;
                }
            }

            & > .content {
                width: 100%;
                max-width: 1400px;
                margin: 0px 2.5vw;
                position: relative;
                z-index: 2;
            }
        }
    }
</style>
