{% set width = element.width ?? 100 %}

{% embed '@DediSyliusCmsPlugin/Shop/UiElement/Grids/column-' ~ width ~ '.html.twig' %}
    {% block content %}
            <section class="block-section block-product-collection">
                <div class="title-wrapper">
                    {% if element.title is defined and element.title is not empty %}
                        <{{ element.htmlTag|default('h2') }} class="h2">{{ element.title }}</{{ element.htmlTag|default('h2') }}>
                    {% endif %}
                </div>

                <div class="cross-slider slick-arrow-btn">
                    {% for item in element.collection %}
                        <div class="item">
                            {% include "@DediSyliusCmsPlugin/Shop/UiElement/Bases/product.html.twig" with {'element':item} %}
                        </div>
                    {% endfor %}
                </div>
                <div class="cross-slider-dots"></div>

                {% if element.link is defined and element.link.link is not empty %}
                <div class="btn-wrapper">
                    <a class="btn btn-primary" href="{{ element.link.link }}" target="_blank">
                        {{ element.link.label|default('dedi_cms.ui.btn_default'|trans) }}
                    </a>
                </div>
                {% endif %}
            </section>
    {% endblock %}
{% endembed %}
