{% set sliderAutoplay = element.translated.config.settings.value.autoplay %}
{% set sliderNavigation = element.translated.config.navigation.value %}
{% set sliderArrows = element.translated.config.arrows.value %}
{% set sliderTitle = element.translated.config.content.value.title %}
{% set showContainerWrapper = false %}

{% set sliderOptions = {
    splideOptions: {
        arrows: sliderArrows.active,
        pagination: sliderNavigation.active,
        mediaQuery: 'min',
        gap: '0px',
        autoplay: sliderAutoplay.active,
        interval: sliderAutoplay.interval,
        pauseOnHover: sliderAutoplay.pauseOnHover,
        speed: element.translated.config.settings.value.speed,
        rewind: element.translated.config.settings.value.rewind,
        breakpoints: {
            (theme_config('breakpoint.' ~ blurElysiumBreakpoints.mobile)): {
                perPage: element.config.viewports.value.mobile.settings.slidesPerPage ?? 1,
                gap: element.config.viewports.value.mobile.sizing.slidesGap ?? 0
            },
            (theme_config('breakpoint.' ~ blurElysiumBreakpoints.tablet)): {
                perPage: element.config.viewports.value.tablet.settings.slidesPerPage ?? 1,
                gap: element.config.viewports.value.tablet.sizing.slidesGap ?? 0
            },
            (theme_config('breakpoint.' ~ blurElysiumBreakpoints.desktop)): {
                perPage: element.config.viewports.value.desktop.settings.slidesPerPage ?? 1,
                gap: element.config.viewports.value.desktop.sizing.slidesGap ?? 0
            }
        }
    }
} %}

{% set sliderClasses = [
    'cms-element-elysium-slider'
] %}

{% set slideWrapperClasses = [
    'cms-element-elysium-slide__wrapper',
    'splide__slide',
    'd-flex',
    'flex-column',
] %}

{% set slideClasses = ['flex-fill'] %}

{% if element.config.settings.value.overlay is same as(true) %}
    {% set sliderClasses = sliderClasses|merge([
        'slide-overlay'
    ]) %}
{% endif %}

{% if element.config.settings.value.containerWidth is same as('content') %}
    {% set showContainerWrapper = true %}
{% endif %}

{% block cms_element_blur_elysium_slider_root %}

    {% block cms_element_blur_elysium_slider_css_styles %}
        {% sw_include '@Storefront/storefront/component/blur-elysium-slider/style.html.twig' %}
    {% endblock %}

    {% block cms_element_blur_elysium_slider %}
        <div id="elysiumSlider-{{ element.id }}" 
            data-blur-elysium-slider="{{sliderOptions|json_encode|replace({'%replace%': ''}) }}"
            class="{{sliderClasses|join(' ')}}">

            {% block blur_elysium_control_include_header %} 
                {% if sliderTitle is not empty %} 
                    {% sw_include '@Storefront/storefront/component/blur-elysium-slider/header.html.twig' %}
                {% endif %}
            {% endblock %}

            {% if element.data.slideCollection is empty %}

                {% block cms_element_blur_elysium_slider_empty_state %}
                    <!-- no slide collection here -->
                {% endblock %}
            {% else %}

                {% block cms_element_blur_elysium_slider_container %}
                    <section class="blur-elysium-slider splide is-loading"
                        {% if sliderTitle is not empty %}
                            aria-label="{{sliderTitle}}"
                        {% endif %}
                        style="visibility: visible;"
                        data-blur-elysium-slider-container>

                        {% block cms_element_blur_elysium_slide_wrapper %}
                            <div class="blur-elysium-slide__wrapper">

                                {% block cms_element_blur_elysium_slide_track_before %}{% endblock %}

                                <div class="splide__track">
                                    <ul class="splide__list">
                                        {% for slide in element.data.slideCollection %}
                                            <li class="{{slideWrapperClasses|join(' ')}}">

                                                {% block cms_element_blur_elysium_slide_include %}
                                                    {% set slideTemplate = 'default' %}
                                                    {% set slideFile = 'slide.html.twig' %}

                                                    {% if slide.product is not same as(null) and slide.slideSettings.slide.linking.type is same as('product') %}
                                                        {% set slideFile = 'slide-product.html.twig' %}
                                                    {% endif %}

                                                    {% if slide.slideSettings.customTemplateFile is not empty %}
                                                        {% set slideTemplate = 'custom' %}
                                                        {% set slideFile = slide.slideSettings.customTemplateFile ~ '.html.twig' %}
                                                    {% endif %}

                                                    {% sw_include '@Storefront/storefront/component/blur-elysium-slide/' ~ slideTemplate ~ '/' ~ slideFile ignore missing with {
                                                        slideData: slide,
                                                        showContainerWrapper: showContainerWrapper
                                                    } %}
                                                {% endblock %}
                                            </li>
                                        {% endfor %}
                                    </ul>
                                </div>

                                {% block cms_element_blur_elysium_slide_track_after %}

                                    {% block blur_elysium_slider_arrows_include_position_in_slider %}  
                                        {% sw_include '@Storefront/storefront/component/blur-elysium-slider/arrows.html.twig' with {
                                            config: sliderArrows,
                                            elementId: element.id
                                        } only %}
                                    {% endblock %}
                                {% endblock %}
                            </div>
                        {% endblock %}
                        
                        {% block blur_elysium_slider_navigation_include_under_slider %}  
                            {% sw_include '@Storefront/storefront/component/blur-elysium-slider/navigation.html.twig' with {
                                config: sliderNavigation,
                                elementId: element.id
                            } only %}
                        {% endblock %}

                    </section>
                {% endblock %} 
           {% endif %}

        </div>  
    {% endblock %}  
{% endblock %}