{% sw_extends '@Storefront/storefront/page/product-detail/cross-selling/tabs.html.twig' %}


{% block page_product_detail_cross_selling_tabs_inner %}
    <div data-cross-selling="true">
         <a class="d-none" data-bs-toggle="tab"></a>
        {% block page_product_detail_cross_selling_tabs_navigation %}
            {% block page_product_detail_cross_selling_tabs_navigation_container %}
                <div class="text-center">
                    {% for item in crossSellings|filter(item => item.total > 0 and item.crossSelling.active == true) %}
                        {% set id = item.crossSelling.id %}
                        <h2>
                            {{ item.crossSelling.name }}
                        </h2>
                    {% endfor %}
                </div>
            {% endblock %}
        {% endblock %}

        {% block page_product_detail_cross_selling_tabs_content %}
            <div class="">
                {% block page_product_detail_cross_selling_tabs_content_container %}
                    <div >
                        {% for item in crossSellings|filter(item => item.total > 0 and item.crossSelling.active == true) %}
                            {% set id = item.crossSelling.id %}
                            <div>
                                {% set config = {
                                    'title': {
                                        'value': item.crossSelling.name ?: item.crossSelling.translated.name
                                    },
                                    'border': {
                                        'value': false
                                    },
                                    'rotate': {
                                        'value': false
                                    },
                                    'products': {
                                        'value': item.getProducts()
                                    },
                                    'boxLayout': {
                                        'value': 'minimal'
                                    },
                                    'elMinWidth': {
                                        'value': '300px'
                                    },
                                    'navigation': {
                                        'value': true
                                    },
                                    'displayMode': {
                                        'value': 'contain'
                                    },
                                    'verticalAlign': {
                                        'value': 'top'
                                    },
                                } %}

                                {% sw_include "@Storefront/storefront/element/cms-element-product-slider.html.twig" with {
                                    sliderConfig: config,
                                    element: {
                                        'data': {
                                            'products': {
                                                elements: item.getProducts()
                                            }
                                        },
                                        type: 'product-slider'
                                    }
                                } %}
                            </div>
                        {% endfor %}
                    </div>
                {% endblock %}
            </div>
        {% endblock %}
    </div>
{% endblock %}
