{% set classes = classes|default("") %}
{% set headingClass = headingClass|default("") %}
{% set isDark = isDark|default(false) and isDark == true ? true : false %} {# default false #}
{% set isMealPlan = isMealPlan|default(false) and isMealPlan == true ? true : false %} {# default false #}
{% set isPersonalized = isPersonalized|default("") and isPersonalized == true ? true : false %} {# default false #}
{% set isCarouselEnabled = recipes|length <= 4 ? false : true %}
{% set classes = isCarouselEnabled ? classes : classes ~ " is-carousel-disabled" %}
{# Toggle animation data attributes #}
{% set isAnimated = (isAnimated|default('') and isAnimated == true) ? true : false %}
{% set week = weekdays ? weekdays : [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday"
] %}

<div
    class="wrapper wrapper-carousel wrapper-carousel-recipes slides-{{ recipes|length }} {{ classes }}"
    data-hvr="wrappers/carousel"
    data-component
>

    {# Slider main container #}
    <div class="wrapper-carousel-recipes__swiper-container swiper-container" data-carousel data-carousel-type="4-col">
        {# Additional required wrapper #}
        <div class="wrapper-carousel-recipes__swiper-wrapper swiper-wrapper" {{ isAnimated ? 'data-skroll-items' : '' }}>
            {# Slides #}
            {% for recipe in recipes %}
                {% set props =  {} %}
                {# Handle personalized data #}
                {% if isPersonalized %}
                    {# Recipe save flow params #}
                    {% set postParams = {
                        name: recipe.slug,
                        createCollection: {
                            image: recipe.src
                        }
                    } %}
                    {% set ingredientParams = recipe.ingredients %}
                    {% set recipeParams = {
                        type: 'recipe',
                        recipeId: recipe.childRecipeId ?: 'null',
                        name: recipe.heading,
                        image: recipe.src,
                        imageLarge: recipe.src,
                        servings: recipe.servings,
                        servingsUnit: 'people',
                        parent_id: recipe.id,
                        parent_url: recipe.href
                    } %}
                    {% set bookmarkParams = 'data-shelf-trigger=recipe-save-flow data-recipe-save-flow-id=' ~ recipeParams.recipeId ~ ' data-post=' ~ postParams|json_encode()|url_encode ~ ' data-recipe=' ~ recipeParams|json_encode()|url_encode ~ ' data-ingredients=' ~ ingredientParams|json_encode()|url_encode %}
                    {% set props =  {
                        classes: "swiper-slide",
                        eyebrow: recipe.eyebrow,
                        heading: recipe.heading,
                        headingClass: headingClass,
                        recommended: recipe.recommended,
                        src: recipe.src ~ "?width=400&quality=75",
                        srcTablet: recipe.srcTablet ~ "?width=400&quality=75",
                        srcMobile: recipe.srcMobile ~ "?width=400&quality=75",
                        alt: recipe.alt,
                        href: recipe.href,
                        mealPlanDay: isMealPlan ? week[loop.index0] : null,
                        bookmarkParams: bookmarkParams,
                        tags: recipe.displayTags
                    } %}
                {# Handle cms data #}
                {% else %}
                    {% set recipe = get_post(recipe) %}
                    {# Recipe save flow params #}
                    {% set childRecipeData = recipe.childRecipe(recipe.id) %}
                    {% set postParams = {
                        name: recipe.slug,
                        createCollection: {
                            image: recipe.thumbnail.src ~ "?width=600&quality=75"
                        }
                    } %}
                    {% set ingredients = childRecipeData.wprm_ingredients[0].ingredients %}
                    {% set recipeIngredients = [] %}
                    {% for ingredient in ingredients %}
                        {% set ingredientData = {
                            name: ingredient.ingredient ?: ingredient.name,
                            notes: ingredient.notes,
                            amount: ingredient.amount,
                            unit: ingredient.unit
                        } %}
                        {% set recipeIngredients = recipeIngredients|merge([ingredientData]) %}
                    {% endfor %}
                    {% set ingredientParams = {
                        ingredients: recipeIngredients
                    } %}
                    {% set recipeParams = {
                        type: 'recipe',
                        recipeId: childRecipeData.id,
                        name: recipe.post_title,
                        image: recipe.thumbnail.src ~ "?width=200&quality=75",
                        imageLarge: postParams.createCollection.image,
                        servings: recipe.recipe_servings,
                        servingsUnit: 'people',
                        parent_id: recipe.id,
                        parent_url: recipe.link
                    } %}
                    {% set bookmarkParams = "data-shelf-trigger='recipe-save-flow' data-recipe-save-flow-id='" ~ recipeParams.recipeId ~ "' data-post='" ~ postParams|json_encode()|url_encode ~ "' data-recipe='" ~ recipeParams|json_encode()|url_encode ~ "' data-ingredients='" ~ ingredientParams|json_encode()|url_encode ~ "'" %}
                    {% if tiktok_recipes and recipe.meta('tiktok_feature').module_tiktok_feature.user_image %}
                        {% set imageSrc = get_image(recipe.meta('tiktok_feature').module_tiktok_feature.user_image).src %}
                    {% else %}
                        {% set imageSrc = recipe.thumbnail.src %}
                    {% endif %}
                    {% set props =  {
                        classes: "swiper-slide",
                        eyebrow: recipe.recipe_prep_time ~ ' Mins Prep - ' ~ recipe.recipe_total_time ~ ' Mins Cook',
                        heading: recipe.post_title,
                        headingClass: headingClass,
                        recommended: recipe.bvRating ? recipe.bvRating|number_format(1) : recipe.recipe_bv_rating|number_format(1),
                        src: imageSrc ~ "?width=600&quality=75",
                        srcTablet: imageSrc ~ "?width=400&quality=75",
                        srcMobile: imageSrc ~ "?width=300&quality=75",
                        alt: recipe.thumbnail.alt ?: recipe.post_title,
                        href: recipe.link,
                        mealPlanDay: isMealPlan ? week[loop.index0] : null,
                        bookmarkParams: bookmarkParams,
                        tags: recipe.displayTags
                    } %}
                {% endif %}
                {% include "@views/components/cards/recipe/template.twig" with props %}
            {% endfor %}
        </div>
        {% include "@views/components/wrappers/carousel-controls/template.twig" with {
            isDark: isDark,
            isAnimated: isAnimated,
        } %}
    </div>
</div>