{% block cms_element_cross_selling_tabs_inner %}
    {% if not sliderConfig %}
        {% set sliderConfig = element.fieldConfig.elements %}
    {% endif %}

    {% if element.data.crossSellings.elements is defined and element.data.crossSellings.elements|filter(item => item.total > 0)|length > 0 %}
        <div class="product-detail-cross-selling">
            <div class="card card-tabs" data-cross-selling="true">
                {% block cms_element_cross_selling_tabs_navigation %}
                    <div class="card-header product-detail-tab-navigation product-cross-selling-tab-navigation">
                        {% block cms_element_cross_selling_tabs_navigation_container %}
                            <ul class="nav nav-tabs product-detail-tab-navigation-list"
                                id="product-detail-cross-selling-tabs"
                                role="tablist">
                                {% for item in element.data.crossSellings.elements|filter(item => item.total > 0 and item.crossSelling.active == true) %}
                                    {% set crossSelling = item.crossSelling %}
                                    {% set products = item.products %}
                                    {% set id = crossSelling.id %}

                                    <li class="nav-item">
                                        <a class="nav-link product-detail-tab-navigation-link{% if loop.first %} active{% endif %}"
                                           id="cross-selling-tab-{{ id }}"
                                           data-bs-toggle="tab"
                                           href="#cross-selling-tab-{{ id }}-pane"
                                           role="tab"
                                           title="{{ crossSelling.translated.name }}"
                                           aria-controls="cross-selling-tab-{{ id }}-pane"
                                           aria-selected="true"
                                        >
                                            {{ crossSelling.translated.name }}
                                            <span class="product-detail-tab-navigation-icon">
                                                {% sw_icon 'arrow-medium-right' style { pack:'solid' } %}
                                            </span>
                                        </a>
                                    </li>
                                {% endfor %}
                            </ul>
                        {% endblock %}
                    </div>
                {% endblock %}

                {% block cms_element_cross_selling_tabs_content %}
                    <div class="product-detail-tabs-content card-body">
                        {% block cms_element_cross_selling_tabs_content_container %}
                            <div class="tab-content">
                                {% for item in element.data.crossSellings.elements|filter(item => item.total > 0 and item.crossSelling.active == true) %}
                                    {% set crossSelling = item.crossSelling %}
                                    {% set products = item.products %}
                                    {% set id = crossSelling.id %}
                                    <div class="tab-pane fade show{% if loop.first %} active{% endif %}"
                                         id="cross-selling-tab-{{ id }}-pane"
                                         role="tabpanel"
                                         aria-labelledby="cross-selling-tab-{{ id }}"
                                    >
                                        {% set config = {
                                            title: {
                                                value: crossSelling.name ?: crossSelling.translated.name,
                                            },
                                            border: {
                                                value: false,
                                            },
                                            rotate: {
                                                value: false,
                                            },
                                            products: {
                                                value: products,
                                            },
                                            boxLayout: {
                                                value: sliderConfig.boxLayout.value,
                                            },
                                            elMinWidth: {
                                                value: sliderConfig.elMinWidth.value,
                                            },
                                            navigation: {
                                                value: true,
                                            },
                                            navigationArrows: {
                                                value: 'outside',
                                            },
                                            displayMode: {
                                                value: sliderConfig.displayMode.value,
                                            },
                                            verticalAlign: {
                                                value: center,
                                            },
                                            speed: {
                                                value: sliderConfig.speed.value,
                                            },
                                        } %}

                                        {% block cms_element_cross_selling_tabs_content_container_slider %}
                                            {% sw_include '@Storefront/storefront/element/cms-element-product-slider.html.twig' with {
                                                sliderConfig: config,
                                                element: {
                                                    data: {
                                                        products: products,
                                                    },
                                                    type: 'product-slider',
                                                },
                                            } %}
                                        {% endblock %}
                                    </div>
                                {% endfor %}
                            </div>
                        {% endblock %}
                    </div>
                {% endblock %}
            </div>
        </div>
    {% endif %}
{% endblock %}