{{ modal_key = 'column-stack-' + index }}
{{ partial:components/section :bg-color="background.color" :bg-image="background.image ? background.image[0] : null" :max-width="options.max_content_width" :extra-padding="options.extra_section_padding" :class="options.custom_class_name" }}
    {{ if column_stack_title }}
        {{ partial:components/section-title :bg-color="background.color" :text="column_stack_title" }}
    {{ /if }}

    {{ if column_stack_text }}
        {{ partial:components/text-wrapper :bg-color="background.color" :text="column_stack_text" }}
    {{ /if }}

    <div
        class="
            columns flex justify-center
            {{ if column_stack_settings.display_type !== 'stretch' }}
                flex-row flex-wrap items-start -m-4
            {{ else }}
                flex-col md:flex-row md:items-stretch items-center md:-mx-4
            {{ /if }}
        "
    >
        {{ columns }}
            {{ column_tag = column_link.link_field ? 'a' : 'div' }}
            {{ is_column_clickable = column_stack_settings.popup_text || column_link.link_field }}
            <{{ column_tag }}
                class="
                    flex group
                    {{ if column_stack_settings.show_separation_border }}
                        border-red
                        {{ if !last }} border-b md:border-r md:border-b-0 {{ /if }}
                    {{ /if }}
                    {{ if column_stack_settings.display_type === 'wide' }}
                        w-64
                    {{ elseif column_stack_settings.display_type === 'wider' }}
                        w-80
                    {{ elseif column_stack_settings.display_type === 'widest' }}
                        w-96
                    {{ elseif column_stack_settings.display_type === 'standard' }}
                        w-44
                    {{ /if }}
                    {{ if column_stack_settings.display_type !== 'stretch' }}
                        p-4 flex-col-reverse flex-shrink-0 max-w-full
                    {{ else }}
                        py-4 md:py-0 md:px-4 text-left max-w-sm
                        {{ if last }} pb-0 {{ /if }}
                        {{ if first }} pt-0 {{ /if }}
                    {{ /if }}
                    {{ if is_column_clickable }} cursor-pointer {{ /if }}
                "
                {{ if column_link.link_field }}
                    href="
                        {{ if column_link.link_field|contains('entry::') }} {{ link :id="column_link.link_field" }} {{ else }} {{ column_link.link_field|replace('asset::assets::', '/assets/') }} {{ /if }}
                    "
                    {{ if column_link.link_field|contains('asset::assets') }} target="_blank" {{ /if }}
                {{ /if }}
                {{ if column_stack_settings.popup_text }}
                    x-data
                    @click="$dispatch('open-modal-{{ modal_key }}', { active: {{ index }} })"
                {{ /if }}
            >
                {{ if column_text || column_title || column_link.link_text }}
                    <div
                        class="
                            {{ if column_image && column_stack_settings.display_type === 'stretch' }} pr-2 {{ /if }}
                        "
                    >
                        {{ if column_title }}
                            <h2
                                class="
                                    uppercase font-bold font-headline text-xl transition-colors
                                    {{ if column_text && column_stack_settings.popup_text }} mb-1 {{ /if }}
                                    {{ if background.color }} text-{{ convert_color:bg_to_headline :color="background.color" }} {{ else }} text-black {{ /if }}
                                    {{ if is_column_clickable }} group-hover:text-black {{ /if }}
                                "
                            >
                                {{ column_title }}
                            </h2>
                        {{ /if }}

                        {{ if column_text && !column_stack_settings.popup_text }}
                            {{ partial:components/text-wrapper :bg-color="background.color" :text="column_text" size="sm" }}
                        {{ /if }}

                        {{ if column_link.link_text }}
                            {{ partial:components/button :bg-color="background.color" :text="column_link.link_text" size="sm" :class="column_title || column_text ? 'mt-3' : ''" }}
                        {{ /if }}
                    </div>
                {{ /if }}

                {{ column_image }}
                    <div
                        class="
                            img-col
                            {{ if is_column_clickable }} origin-bottom transition-transform {{ /if }}
                            {{ if column_text && column_stack_settings.display_type === 'stretch' }} w-1/4 flex-shrink-0 {{ /if }}
                        "
                    >
                        <img src="{{ url }}" alt="{{ alt ?? column_title }}" class="block w-full max-w-[600px]" />
                    </div>
                {{ /column_image }}
            </{{ column_tag }}>
        {{ /columns }}
    </div>
{{ /partial:components/section }}

{{ if column_stack_settings.popup_text }}
    {{ partial:components/modal :key="modal_key" }}
        <div
            class="h-[80vh]"
            x-data="{
                active: 0,
                flkty: null,
                initialize(e) {
                    setTimeout(() => {
                        if (this.flkty) {
                            this.flkty.destroy();
                        }

                        this.flkty = new Flickity(this.$refs.carousel, { wrapAround: true, adaptiveHeight: true });
                        this.flkty.on('change', i => this.active = i);
                        this.flkty.resize();

                        if (typeof e?.detail?.active !== 'undefined') {
                            this.active = e.detail.active;
                            this.flkty.select(this.active);
                        }
                    }, 25)
                },
                handleResize() {
                    if (this.flkty) {
                        this.flkty.resize();
                    }
                }
            }"
            x-ref="carousel"
            @resize.window="handleResize()"
            @open-modal-{{ modal_key }}.window="initialize"
        >
            {{ columns }}
                <div class="flex flex-col items-center justify-center w-full h-full max-w-xl px-5 transition-opacity duration-500" :class="{ 'opacity-25': {{ index }} !== active }">
                    {{ column_image }}
                        <img src="{{ url }}" alt="{{ alt ?? column_title }}" class="w-full -mt-[10vh] mb-1 max-w-[10rem]" />
                    {{ /column_image }}

                    {{ partial:components/section-title :text="column_title" }}

                    {{ partial:components/text-wrapper :text="column_text" }}
                </div>
            {{ /columns }}
        </div>
    {{ /partial:components/modal }}
{{ /if }}