{% 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
                                                },
                                                'displayMode': {
                                                    'value': sliderConfig.displayMode.value
                                                },
                                                'verticalAlign': {
                                                    'value': center
                                                }
                                            } %}

                                            {% 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 %}
