<script lang="ts">
    export let blocks: ContentBlock[]
    export let imageBase: string

    export let accordeon = false

    let activeAccordeons: {
        [key: number]: boolean
    } = {}
</script>

<style lang="less">
    .acc_trigger {
        display: flex;
        display: -webkit-flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        border-bottom: solid 1px #ccc;
        padding-bottom: 10px;
        .icon {
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            transform: rotate(0deg);
            transition: all 0.3s;
        }
        &.active {
            .icon {
                transform: rotate(180deg);
            }
        }
    }

    .hideText {
        display: none;
    }
</style>

{#if blocks?.length}
    <section class="section_padding">
        <div class="container">
            {#each blocks as box, idx}
                <!-- Teaserbox -->
                <div class="row center_row">
                    {#if box.images?.length && (box.layout == 1 || box.layout == 3)}
                        <div class="col-md-{box.layout < 3 ? 6 : 12}">
                            <img
                                loading="lazy"
                                src="{imageBase + box.images[0].file.src}"
                                alt="{box.images[0].label || ''}"
                            />
                        </div>
                    {/if}
                    {#if box.text || box.title || (box.button_text && box.button_url)}
                        <div class="col-md-{box.layout < 3 ? 6 : 12}">
                            {#if box.subtitle}
                                <div class="subline">{box.subtitle}</div>
                            {/if}
                            {#if box.title}
                                {#if accordeon == true}
                                    <h2
                                        class="h2_nooffset acc_trigger"
                                        class:active="{activeAccordeons[idx]}"
                                        on:click="{() => {
                                            activeAccordeons[idx] =
                                                !activeAccordeons[idx]
                                        }}"
                                    >
                                        {box.title}
                                        <span class="icon">\/</span>
                                    </h2>
                                {:else}
                                    <h2 class="h2_nooffset">{box.title}</h2>
                                {/if}
                            {/if}
                            <div
                                class="boxText"
                                class:hideText="{accordeon &&
                                    box.title &&
                                    !activeAccordeons[idx]}"
                            >
                                {@html box.text}
                                {#if box.button_text && box.button_url}
                                    <a
                                        href="{box.button_url}"
                                        class="btn btn_blue"
                                        >{box.button_text}</a
                                    >
                                {/if}
                            </div>
                        </div>
                    {/if}
                    {#if box.images?.length && (box.layout == 2 || box.layout == 4)}
                        <div class="col-md-{box.layout < 3 ? 6 : 12}">
                            <img
                                loading="lazy"
                                src="{imageBase + box.images[0].file.src}"
                                alt="{box.images[0].label || ''}"
                            />
                        </div>
                    {/if}
                </div>
            {/each}
        </div>
    </section>
{/if}
