{# ============================================================
   GoFlare – Cross-Selling wie WordPress:
   - Titel als <h2> (kein Tab-Link)
   - echtes product-slider-Markup -> Karussell mit Pfeilen
   - eigene Cards: 2:3-Bild, teal Name (kein Hover-Underline),
     Zusatztext (custom_produkte_Zusatztext), nur guenstigster Preis
   ============================================================ #}
{% sw_extends '@Storefront/storefront/element/cms-element-cross-selling.html.twig' %}

{% block cms_element_cross_selling_tabs_navigation_container %}
    {% for item in element.data.crossSellings.elements|filter(item => item.total > 0 and item.crossSelling.active == true) %}
        <h2 class="goflare-cross-selling-title">{{ item.crossSelling.translated.name }}</h2>
    {% endfor %}
{% endblock %}

{% block cms_element_cross_selling_tabs_content_container_slider %}
    {% set gfSliderOptions = {
        productboxMinWidth: config.elMinWidth.value ?: '260px',
        slider: {
            controls: true,
            nav: false,
            mouseDrag: true,
            autoplay: config.rotate.value ?: false,
            autoplayButtonOutput: false,
            speed: config.speed.value ?: 300,
            ariaLive: true,
            gutter: 30,
            loop: false,
            rewind: true
        }
    } %}

    <div class="cms-element-product-slider goflare-cross-slider">
        <div class="base-slider product-slider has-nav has-nav-outside"
             data-product-slider="true"
             data-product-slider-options="{{ gfSliderOptions|json_encode }}"
             role="region"
             tabindex="0">

            <div class="product-slider-container" data-product-slider-container="true">
                {% for product in products %}
                    <div class="product-slider-item">
                        {% sw_include '@GoFlareTheme/storefront/component/product/card/goflare-cross-tile.html.twig' with {
                            product: product
                        } %}
                    </div>
                {% endfor %}
            </div>

            <div class="product-slider-controls-container">
                <div class="base-slider-controls" data-product-slider-controls="true" role="navigation">
                    <button class="base-slider-controls-prev product-slider-controls-prev is-nav-prev-outside"
                            aria-label="{{ 'general.previous'|trans|striptags }}">
                        {% sw_icon 'arrow-head-left' %}
                    </button>
                    <button class="base-slider-controls-next product-slider-controls-next is-nav-next-outside"
                            aria-label="{{ 'general.next'|trans|striptags }}">
                        {% sw_icon 'arrow-head-right' %}
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}