{% sw_extends '@Storefront/storefront/element/cms-element-image-slider.html.twig'%}
{% block element_image_slider_inner %}
    <div class="image-slider-container"
            data-base-slider-container="true">
        {% for image in element.extensions['sliderItems'] %}

            {% set imageElement %}
                <div class="image-slider-item{% if loop.first != true %} is-not-first{% endif %} is-{{ sliderConfig.displayMode.value }}"{% if sliderConfig.minHeight.value and  sliderConfig.displayMode.value == "cover" %} style="min-height: {{ sliderConfig.minHeight.value }}"{% endif %}>
                    {% set attributes = {
                        'class': 'img-fluid image-slider-image',
                        'alt': (image['media'].translated.alt ?: ''),
                        'title': (image['media'].translated.title ?: '')
                    } %}

                    {% if element.config.displayMode.value == 'cover' or element.config.displayMode.value == 'contain' %}
                        {% set attributes = attributes|merge({ 'data-object-fit': element.config.displayMode.value }) %}
                    {% endif %}

                    {% sw_thumbnails 'cms-image-slider-thumbnails' with {
                        media: image['media']
                    } %}
                </div>
            {% endset %}

            {% block element_image_slider_inner_item %}
                <div class="image-slider-item-container">
                    {% if image['url'] %}
                        <a href="{{ image['url'] }}"
                            class="image-slider-link"
                            {% if image['newTab'] %}target="_blank" rel="noopener"{% endif %}>
                            {{ imageElement }}
                        </a>
                    {% else %}
                        {{ imageElement }}
                    {% endif %}
                    {% if image['text'] %}
                        <div class="sw-cms-preview-text-on-image__text">
                            {{image['text']|raw}}
                        </div>
                    {% endif %}
                </div>
            {% endblock %}
        {% endfor %}
    </div>
    {% block element_image_slider_controls %}
        {{parent()}}
    {% endblock %}
{% endblock %}