{% set bannerClasses = [
    'blur-elysium-banner'
] %}

{% block cms_element_blur_elysium_banner_root %}

    {% block cms_element_blur_elysium_banner %}
        <div class="{{ bannerClasses|join(' ') }}"
            data-cms-element-id="{{ element.id }}">
            
            <style>
                {# viewport options for cms element #}
                {% for device, options in element.config.viewports.value %}
                    @media (min-width: {{ theme_config('breakpoint.' ~ blurElysiumBreakpoints[device])~'px' }}) {
                        .blur-elysium-banner[data-cms-element-id="{{ element.id }}"] 
                        .blur-elysium-slide
                        {
                            {% if options.aspectRatio.auto is same as(true) %}
                                --slide-aspect-ratio: auto;
                            {% elseif options.aspectRatio.width and options.aspectRatio.height %}
                                --slide-aspect-ratio: {{options.aspectRatio.width}} / {{options.aspectRatio.height}};
                            {% endif %}
                            {% if options.maxHeight is same as(0) %}
                                --slide-max-height: auto;
                            {% elseif options.maxHeight is not empty %}
                                --slide-max-height: {{options.maxHeight ~ 'px'}};
                            {% endif %}
                        }
                    }            
                {% endfor %}
            </style>

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

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

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

            {% block cms_element_blur_elysium_banner_slide_include %}
                {% sw_include '@Storefront/storefront/component/blur-elysium-slide/' ~ slideTemplate ~ '/' ~ slideFile ignore missing with {
                    slideData: element.data.elysiumSlide,
                    lazyLoading: element.translated.config.lazyLoading.value ?? true
                } %}
            {% endblock %}
        </div>
    {% endblock %}
{% endblock %}