<script lang="ts">
    import { navigateWrapper } from "../../functions/utils"
    import Image from "./Image.svelte"
    import Text from "./Text.svelte"
    import Modules from "./Modules.svelte"
    import GoogleMaps from "./GoogleMaps.svelte"
    export let row: Row
    export let pageId: string
    export let bright: boolean
    export let isHP: boolean
    export let i: number
    export let page: Content
</script>

{#if Object.keys(row).length}
    {#if page.pageTitle && i == 0}
        <h1>{page.pageTitle}</h1>
    {/if}
    {#if row.title}
        <h2 class="">{row.title}</h2>
    {/if}
    {#if row?.columns?.length}
        <div class="row">
            {#each row?.columns as col}
                <div class="col">
                    {#if col.contentType == "images"}
                        <Image images="{col.images}" />
                    {:else if col.contentType == "text"}
                        <Text text="{col.text}" />
                    {:else if col.contentType == "form" || col.contentType == "moduleImport"}
                        <Modules {col} {pageId} />
                    {:else if col.contentType == "googleMaps"}
                        <GoogleMaps />
                    {/if}
                </div>
            {/each}
        </div>{/if}
{/if}

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

    h3 {
        font-weight: 500;
        margin-bottom: 15px;
        @media @tablet {
            margin-bottom: 0px;
        }
    }
    h2 {
        font-weight: 500;
        font-size: 1.7rem !important;
    }
    h1 {
        font-weight: 500;
        font-size: 2rem;
    }
    .top-header {
        img {
            width: 20px;
        }
        font-size: 0.7rem;
        @media @tablet {
            font-size: 1.2rem;
            img {
                width: 48px;
            }
        }
    }
    @media @tablet {
        h3 {
            font-size: 1.3rem;
            display: flex;
            align-items: center;
            gap: 10px;
            img {
                width: 40px;
                margin-right: 10px;
            }
            &.subheading {
                font-size: 1.8rem;
            }
        }
        h2 {
            font-size: 2rem !important;
            font-weight: 500;
        }
        h1 {
            font-size: 3.5rem;
            font-weight: 500;
        }
    }
    @media @desktop {
        h2 {
            font-size: 2.3rem !important;
        }
        h1 {
            font-size: 5rem;
        }
    }

    .row {
        padding-top: 40px;
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 20px;

        &.dominant {
            @media (max-width: 1024px) {
                flex-direction: row-reverse;
            }
        }
        @media (max-width: 640px) {
            flex-direction: column-reverse;
            &.normalWrap {
                flex-direction: column;
            }
        }
        & > .col {
            max-width: 100%;
            &.dominant {
                @media (max-width: 1024px) {
                    min-width: 80% !important;
                }
                flex: 5 !important;
            }

            min-width: 40% !important;

            @media @desktop {
                min-width: 30% !important;
            }

            flex: 1;
            min-width: 0;
        }
        &.twoToThree {
            & > .col:nth-child(1) {
                flex: 2 !important;
            }
            & > .col:nth-child(2) {
                flex: 3 !important;
            }
        }
    }

    .hph3 {
        text-transform: uppercase;
        font-size: 0.7rem;
    }
    .nmh3 {
        font-size: 0.9rem;
        @media @tablet {
            font-size: 1.6rem;
        }
    }
</style>
