<script lang="ts">
    export let row: Row
    export let rows: Row[]
    import IconBoard from "./iconBoard.svelte"
    import Image from "./image.svelte"
    import InfoBoard from "./infoBoard.svelte"
    import MainPicture from "./mainPicture.svelte"
    import TextContent from "./textContent.svelte"
    import Table from "./table.svelte"
    import Formular from "./form/Formular.svelte"
    import { writable } from "svelte/store"
    import GoogleMaps from "../googleMaps.svelte"
    import IconInfoBoard from "./iconInfoBoard.svelte"
    import Boxlist from "./boxlist.svelte"
    import ProductPreview from "./productPreview.svelte"

    export let siteId: string
    export let rowNr: number

    function getRowClass(row: Row) {
        if (row.maxWidth || row.column.some((col) => col.iconBackgroundImage)) return "max-width"
        return row.column.some((col) => col.contentType === "mainPicture") ? "max-width" : "small-max-width"
    }
</script>

<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->

<main class="row" name="{row.title}" class:max-width="{getRowClass(row) === 'max-width'}" id="{`RowNr` + rowNr}">
    {#if row.title}
        <h3 class="row-title" class:no-margin="{rowNr == 0}">{row?.title || ""}</h3>
    {/if}
    <div class:no-gap="{row.noGap}" class:wrapAfterTwo="{row.column.length >= 4}">
        {#each row.column || [] as col, i}
            {#if col.contentType == "mainPicture"}
                <MainPicture col="{col}" siteId="{siteId}" />
            {:else if col.contentType == "text"}
                <TextContent rows="{rows}" col="{col}" />
            {:else if col.contentType == "infoBoard"}
                <InfoBoard siteId="{siteId}" col="{col}" i="{i}" />
            {:else if col.contentType == "iconInfoBoard"}
                <IconInfoBoard pageId="{siteId}" col="{col}" i="{i}" />
            {:else if col.contentType == "boxlist"}
                <Boxlist col="{col}" />
            {:else if col.contentType == "iconBoard"}
                <IconBoard col="{col}" siteId="{siteId}" />
            {:else if col.contentType == "image"}
                <Image siteImages="{col.imageSlider}" siteId="{siteId}" />
            {:else if col.contentType == "table"}
                <Table col="{col}" rows="{rows}" />
            {:else if col.contentType == "productPreview"}
                <ProductPreview col="{col}" siteId="{siteId}" />
            {:else if col.contentType == "googleMaps"}{#if col.showGoogleMaps}
                    <GoogleMaps />
                {/if}
            {:else if col.contentType == "form"}
                <Formular col="{col}" siteId="{siteId}" rowNr="{rowNr}" row="{row}" rows="{rows}" />
            {/if}
        {/each}
    </div>
</main>

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

    .row-title {
        font-size: 1.6rem;
        font-weight: bold;
        line-height: normal;
        width: 100%;
        color: var(--heading-font-color);
        @media @mobile {
            margin: 3.2rem 1.5vw 1.6rem;
        }

        @media @desktop {
            margin: 6rem 0vw 1.6rem 0vw;
        }
    }
    .no-margin {
        margin-top: 15px !important;
    }

    .row {
        width: 100%;
        padding: 15px min(4.5vw, 100px) 0px min(4.5vw, 100px);
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: @body-small-maxwidth;

        background-color: var(--background-color);

        ul {
            list-style-type: none; /* Remove default bullet points */
            padding: 0;

            li {
                padding-left: 1.5em; /* Add padding to the left of the list items */
                position: relative;
            }

            li::before {
                content: ""; /* Add an empty content */
                background-image: url("../../../../media/arrow-right.svg");
                background-size: contain;
                background-repeat: no-repeat;
                position: absolute;
                left: 0; /* Position the SVG at the beginning of the list item */
                width: 1em; /* Adjust the width of the SVG */
                height: 1em; /* Adjust the height of the SVG */
                top: 0.2em; /* Adjust the vertical alignment of the SVG */
            }
        }
        & > div {
            width: 100%;
        }
        & > h3 {
            width: 100%;
        }

        @media @mobile {
            .no-gap {
                gap: 0px !important;
            }

            & > div {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: start;

                gap: 20px;

                & > div {
                    flex: 1;
                }
            }
        }

        @media @tablet {
            & > div {
                gap: 40px;
            }
            & > div.wrapAfterTwo {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
            }
        }
        @media @desktop {
            .no-gap {
                gap: 40px !important;
            }
            .row-title {
                font-size: 2.5rem !important;
            }
            & > div,
            & > div.wrapAfterTwo {
                display: flex;
                flex-direction: row;
                align-items: start;
                justify-content: center;
            }
        }
    }
    .max-width {
        max-width: @body-maxwidth !important;
    }
</style>
