<section class="block-section block-slider">
    <div class="default-slider">
        {% for element in element.collection %}
            <section class="block-section block-banner {{ element.style|default('dark') }}">
                <div class="img-wrapper">
                    {{ dedi_sylius_image_optimizer_for_image(element.image.image, element.image.alt|default(element.title.title), {
                        'class' : 'img-fluid',
                        'title' : element.title.title|default('')
                    }) }}
                </div>
                <div class="text-wrapper">
                    {% include '@SyliusShop/Icons/motif.html.twig' %}
                    {% if element.title is defined and element.title.title is not empty %}
                        <{{ element.title.htmlTag|default('h2') }} class="title-wrapper display-1">{{ element.title.title }}</{{ element.title.htmlTag|default('h2') }}>
                    {% endif %}

                    {% if element.title is defined and element.title.subtitle is not empty %}
                        <{{ element.title.subtitleHtmlTag|default('h3') }} class="subtitle-wrapper h3">{{ element.title.subtitle }}</{{ element.title.subtitleHtmlTag|default('h3') }}>
                    {% endif %}

                    {{ element.text.content | raw }}

                    {% if element.link is defined and element.link.link is not empty %}
                        <a href="{{ element.link.link }}" class="btn btn-dark">{{ element.link.label|default('app.ui_element.btn_default'|trans) }} ›</a>
                    {% endif %}
                </div>
            </section>
        {% endfor %}
    </div>
</section>
