{% sw_extends '@Storefront/storefront/element/cms-element-product-slider.html.twig' %}

{# ---------------- START: SET TEMPLATE VARS ---------------- #}

{# ThemeWare: Set theme variables #}
{% set twtProductBoxImageHoverType = theme_config('twt-product-box-image-hover-type') %}

{# ---------------- END: SET TEMPLATE VARS ---------------- #}

{% block element_product_slider_element %}
    {# ThemeWare: Hover image for a cross-fade with the cover image #}
    {% if twtProductBoxImageHoverType == 10 %}
        {# initial ID array #}
        {% set hoverMediaIds = [] %}

        {% for product in element.data.products.elements %}
            {% if product.translated.customFields.twt_modern_pro_custom_field__product__hover_image is not empty %}
                {# simplify ID access #}
                {% set hoverMediaId = product.translated.customFields.twt_modern_pro_custom_field__product__hover_image %}

                {# merge IDs to a single array #}
                {% set hoverMediaIds = hoverMediaIds|merge([hoverMediaId]) %}
            {% endif %}
        {% endfor %}

        {# do a single fetch from database #}
        {% set mediaCollection = searchMedia(hoverMediaIds, context.context) %}
    {% endif %}

    {{ parent() }}
{% endblock %}