<script lang="ts">
    import { navigate } from "svelte-routing"
    export let site: Site
    import Image from "./image.svelte"
    export let index: number
</script>

<main class="teaser">
    {#if index % 2 == 0 || window.innerWidth < 1023}
        <Image siteId="{site?.id}" siteImages="{site?.teaserImages || []}" />
    {/if}
    <div class="content">
        <h3>{site?.teaserTitle}</h3>
        <p>{site?.teaserDescription}</p>
        <button on:click="{() => navigate(site.path)}">MEHR</button>
    </div>
    {#if index % 2 == 1 && window.innerWidth > 1023}
        <Image siteId="{site?.id}" siteImages="{site?.teaserImages || []}" />
    {/if}
</main>

<style lang="less">
    @import "../../assets/css/variables.less";
    .teaser {
        max-width: @body-small-maxwidth;
        display: flex;
        flex-direction: column;
        gap: 2vw;
        padding: 15px min(4.5vw, 100px) 0px min(4.5vw, 100px);

        max-width: @body-small-maxwidth;
        @media @desktop {
            flex-direction: row;
        }
        div {
            flex: 1;
        }
        .content {
            flex: 1;
            display: flex;
            flex-direction: column;
            h3 {
                font-size: 2rem;
                font-weight: bold;
                margin: 0rem 0 1.6rem 0;
                color: var(--heading-font-color);
            }
            button {
                font-weight: bold;
                color: var(--link-font-color);
                width: fit-content;
                border-top: 3px solid var(--link-font-color);
                margin-top: 3rem;
            }
        }
    }
</style>
