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

    {% set visibleValues = ['inside', 'outside'] %}

    {% set blockId = block.id %}

    {% if element.data.products.elements %}
        <div
            class="cms-element-{{ element.type }}{% if sliderConfig.displayMode.value == "standard" and sliderConfig.verticalAlign.value %} has-vertical-alignment{% endif %}">
            {% block element_product_slider_alignment %}
                {% if config.verticalAlign.value %}
                    <div class="cms-element-alignment{% if sliderConfig.verticalAlign.value == "center" %} align-self-center{% elseif sliderConfig.verticalAlign.value == "flex-end" %} align-self-end{% else %} align-self-start{% endif %}">
                {% endif %}

                {% set hasNavigationArrows = sliderConfig.navigationArrows.value in visibleValues %}

                {% set productSliderOptionsSlider = {
                    controls: hasNavigationArrows,
                    nav: false,
                    mouseDrag: true,
                    autoplay: sliderConfig.rotate.value,
                    autoplayButtonOutput: false,
                    autoplayTimeout: sliderConfig.autoplayTimeout.value,
                    speed: sliderConfig.speed.value,
                    ariaLive: sliderConfig.rotate.value ? false : true,
                    gutter: 30,
                    loop: false,
                    rewind: true
                }%}

                {% set productSliderOptions = {
                    productboxMinWidth: sliderConfig.elMinWidth.value ? sliderConfig.elMinWidth.value : '',
                    slider: productSliderOptionsSlider
                } %}

                {% block element_product_slider_slider %}
                    <div
                        class="base-slider product-slider{% if sliderConfig.border.value %} has-border{% endif %}{% if hasNavigationArrows %} has-nav has-nav-{{ sliderConfig.navigationArrows.value }}{% endif %}"
                        data-product-slider="true"
                        data-product-slider-options="{{ productSliderOptions|json_encode }}"
                        role="region"
                        aria-label="{{ 'component.cms.productGallery.ariaLabel'|trans({ '%total%': element.data.products.elements|length })|sw_sanitize }}"
                        tabindex="0"
                    >

                        {% block element_product_slider_skip_slider %}
                            {% sw_include '@Storefront/storefront/component/skip-target.html.twig' with {
                                targetId: blockId,
                                snippet: 'component.cms.productGallery.skipProductGallery',
                            } %}
                        {% endblock %}

                        {% block element_product_slider_title %}
                            {% if sliderConfig.title.value %}
                                <div class="cms-element-title">
                                    <p class="cms-element-title-paragraph">{{ sliderConfig.title.value }}</p>
                                </div>
                            {% endif %}
                        {% endblock %}

                        {% block element_product_slider_inner %}
                            {% block element_product_slider_element %}
                                <div class="product-slider-container"
                                     data-product-slider-container="true">
                                    {% for product in element.data.products.elements %}
                                        {% block element_product_slider_inner_item %}
                                            <div class="product-slider-item">
                                                {% sw_include '@Storefront/storefront/component/product/card/box.html.twig' with {
                                                    'layout': sliderConfig.boxLayout.value,
                                                    'displayMode': sliderConfig.displayMode.value
                                                } %}
                                            </div>
                                        {% endblock %}
                                    {% endfor %}
                                </div>
                            {% endblock %}

                            {% block element_product_slider_controls %}
                                {% if hasNavigationArrows %}
                                    <div class="product-slider-controls-container">
                                        <div
                                            class="base-slider-controls"
                                            data-product-slider-controls="true"
                                            role="navigation"
                                        >
                                            {% block element_product_slider_controls_items %}
                                                <button
                                                    class="base-slider-controls-prev product-slider-controls-prev is-nav-prev-{{ sliderConfig.navigationArrows.value }}{% if sliderConfig.border.value %} has-border{% endif %}"
                                                    aria-label="{{ 'general.previous'|trans|striptags }}">
                                                    {% block element_product_slider_controls_items_prev_icon %}
                                                        {% sw_icon 'arrow-head-left' %}
                                                    {% endblock %}
                                                </button>
                                                <button
                                                    class="base-slider-controls-next product-slider-controls-next is-nav-next-{{ sliderConfig.navigationArrows.value }}{% if sliderConfig.border.value %} has-border{% endif %}"
                                                    aria-label="{{ 'general.next'|trans|striptags }}">
                                                    {% block element_product_slider_controls_items_next_icon %}
                                                        {% sw_icon 'arrow-head-right' %}
                                                    {% endblock %}
                                                </button>
                                            {% endblock %}
                                        </div>
                                    </div>
                                {% endif %}
                            {% endblock %}
                        {% endblock %}
                    </div>
                {% endblock %}
                {% if config.verticalAlign.value %}
                    </div>
                {% endif %}
            {% endblock %}
        </div>
    {% endif %}

    {% block element_product_slider_target_after_slider %}
        <div id="content-after-target-{{ blockId }}"></div>
    {% endblock %}
{% endblock %}