{% set params = params|default('') %}

{# BACKGROUND TEXTURE #}
{% set background_color = background_color|default("green") %}

{# TEXT AREA #}
{% set eyebrow = eyebrow|default('') %}
{% set heading = heading|default('') %}
{% set headingClass = headingClass|default("h2") %}
{% set paragraph = paragraph|default('') %}
{% set logo = logo|default('') %}
{% set isAnimated = isAnimated|default(true) %}

{# CAROUSEL #}
{% set isDark = isDark|default(true) %}

<div
    class="interstitial interstitial-weekly-meal-plan"
    data-skroll="carousel-interstitial"
    data-hvr="interstitials/weekly-meal-plan"
    data-module
    {{ params }}>

    {# BACKGROUND TEXTURE #}
    {% include "@views/components/media/textures/" ~ background_color ~ "/template.twig" %}

    <div class="interstitial__container container">
        {% set collectionImages = [] %}
        {% for column in collection.columns %}
            {% set recipe = collection.items[loop.index0 ~ "-0"][0] %}
            {% set image =  recipe.img.src ~ "?width=200&quality=75" %}
            {% set collectionImages = collectionImages|merge([image]) %}
        {% endfor %}
        {% set saveCtaParams = "data-shelf-trigger='recipe-save-flow' data-recipe-save-flow-id='" ~ collection.id ~ "' data-save-meal-plan='weekly'" ~ " data-collection='" ~ collection|json_encode()|url_encode ~ "'" ~ " data-collection-images='" ~ collectionImages|json_encode()|url_encode ~ "'" %}

        {% include '@views/components/nudges/trend-signup/template.twig' %}

        {# TEXT AREA #}
        <div class="text-group text-group-carousel {% if isDark %}text-group-carousel--light{% endif %} {{ classes }}">
            <div class="text-group-carousel__text" {{ isAnimated ? 'data-skroll-text' : '' }}>
                {% if eyebrow %}
                    <div class="eyebrow text-group-carousel__eyebrow" data-skroll-eyebrow>
                        <span class="eyebrow__text">{{ eyebrow }}</span>
                    </div>
                {% endif %}

                {% if heading %}
                    {% include "@views/components/textual/heading/carousel/template.twig" with {
                        classes: "text-group-carousel__heading",
                        tag: headingClass,
                        text: heading,
                        isAnimated: isAnimated,
                    } %}
                {% endif %}

                {% if paragraph %}
                    {% include "@views/components/textual/paragraph/hero/template.twig" with {
                        classes: "text-group-carousel__paragraph-text",
                        text: paragraph,
                        isAnimated: isAnimated,
                    } %}
                {% endif %}
            </div>

            {% if cta %}
                {% if cta.title %}
                    {% set text = cta.title %}
                    {% else %}
                    {% set text = cta.text %}
                {% endif %}
                {% if cta.url %}
                    {% set href = cta.url %}
                    {% else %}
                    {% set href = cta.href %}
                {% endif %}
                <div class="text-group-carousel__ctas" {{ isAnimated ? 'data-skroll-buttons' : '' }}>
                    {% if cta %}
                        {% include "@views/components/buttons/primary/template.twig" with {
                            classes: "text-group-carousel__cta",
                            text: text,
                            href: href,
                            icon: cta.icon,
                            target: cta.target,
                            params: saveCtaParams,
                            external: cta.external,
                            color: color,
                            isSolid: true
                        } %}
                    {% endif %}
                </div>
            {% endif %}
        </div>

        {# CAROUSEL #}
        <div class="wrapper wrapper-carousel wrapper-carousel-weekly-recipes interstitial__carousel interstitial-weekly-meal-plan__carousel" data-hvr="wrappers/carousel" data-component>
            {# Slider main container #}
            <div
                class="wrapper-carousel-weekly-recipes__swiper-container swiper-container"
                data-carousel
                data-carousel-type="4-col"
                {{ isAnimated ? 'data-skroll="carousel-tilted"' : '' }}>

                {# Additional required wrapper #}
                <div class="wrapper-carousel-weekly-recipes__swiper-wrapper swiper-wrapper">
                    {# Slides #}
                    {% for column in collection.columns %}
                        {% set recipe = collection.items[loop.index0 ~ "-0"][0] %}

                        {% set index = loop.index0 %}
                        {% set eyebrow = column.eyebrow %}
                        {% set heading = column.headline|default('') %}
                        {% set headingClass = headingClass|default("h5") %}
                        {% set paragraph = recipe.name|default('') %}
                        {% set img = recipe.img|default('') %}
                        {% set href = recipe.parent_url|default('') %}
                        {% set target = target|default("_self") %}
                        {% set isArrow = false %} {# default true #}
                        {% set isOdd = index|default(0) % 2 != 0 ? true : false %} {# default false #}
                        {% set classes = (isArrow == true) ? classes ~ ' is-arrow' : classes %}
                        {% set classes = (isOdd == true and not isStaggerFlipped) or (isOdd == false and isStaggerFlipped) ? classes ~ ' is-odd' : classes %}

                        <div class="card card-meal-plan swiper-slide card-collection {{ classes }}">
                            <div class="card-meal-plan__image-wrapper image-wrapper {% if logo.desktop_src %}logo-buffer{% endif %}">
                                <a href="{{ href }}" target="{{ target }}">
                                    {% if index == 0 and logo.desktop_src %}
                                        <picture class="card-meal-plan__logo">
                                            <source media="(min-width: 1024px)" srcset="{{ logo.desktop_src }}?quality=75 2x">
                                            {% if logo.mobile_src %}
                                                <source srcset="{{ logo.mobile_src }}?quality=75 2x">
                                            {% endif %}
                                            <img src="{{ logo.desktop_src }}?width=262&quality=75" alt="{{ logo.alt }}"/>
                                        </picture>
                                    {% endif %}

                                    <div class="media media-image card-meal-plan__image aspect-ratio aspect-ratio--square">
                                        <picture>
                                            <source media="(min-width: 1600px)" srcset="{{ img.src }}?width=500&quality=75">
                                            <source media="(min-width: 1280px)" srcset="{{ img.src }}?width=500&quality=75">
                                            <source media="(min-width: 1px)" srcset="{{ img.src }}?width=300&quality=75">
                                            <img src="{{ img.src }}?width=300&quality=75" alt="{{ img.alt }}" class="" loading="lazy">
                                        </picture>
                                    </div>

                                    <span class="visuallyhidden">{{ heading }}</span>
                                </a>
                            </div>
                            <div class="card-meal-plan__text-wrapper text-wrapper">
                                <a href="{{ href }}" target="{{ target }}">
                                    {% if eyebrow %}
                                        <p class="card-meal-plan__eyebrow">{{ eyebrow }}</p>
                                    {% endif %}
                                    {% if heading|default("") %}
                                        {% if isArrow == true %}
                                            <h5 class="card-meal-plan__heading {{ headingClass }}">
                                                <span>{{ heading }}</span>
                                                <span class="figure">
                                                    {% include "@assets/vectors/icons-18/arrow.svg" %}
                                                </span>
                                            </h5>
                                        {% else %}
                                            <h5 class="card-meal-plan__heading {{ headingClass }}">{{ heading }}</h5>
                                        {% endif %}
                                    {% endif %}
                                    {% if paragraph|default("") %}
                                        <p class="card-meal-plan__paragraph line-clamp h7">{{ paragraph }}</p>
                                    {% endif %}
                                    {% if icon|default("") %}
                                        <div class="card-meal-plan__icon">
                                            {% include "@assets/vectors/icons-18/" ~ icon ~ ".svg" %}
                                        </div>
                                    {% endif %}
                                </a>
                            </div>
                        </div>
                    {% endfor %}

                </div>

                {% include "@views/components/wrappers/carousel-controls/template.twig" with {
                    isDark: isDark
                } %}
            </div>
        </div>
    </div>
</div>