<div {{ attributes.defaults({ class: 'theme-shop-information-blocks' }) }}>
    {% if this.hasBlocks %}
        {% set blocks = this.blocks %}
        {% set blockCount = blocks|length %}
        <section class="theme-shop-information-section">
            {% if blockCount > 1 %}
                <div
                    class="splide theme-shop-information-carousel--mobile"
                    data-controller="carousel"
                    data-carousel-type-value="shop-info"
                    data-carousel-peek-value="{{ blockCount > 1 ? 'true' : 'false' }}"
                    role="group"
                    aria-label="{{ 'shop.information_blocks_label'|trans }}">
                    <div class="splide__track">
                        <div class="splide__list">
                            {% for block in blocks %}
                                <div class="splide__slide">
                                    {% include 'components/shop/_information_block_card.html.twig' with { block: block } only %}
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            {% endif %}

            {% if blockCount > 3 %}
                <div
                    class="splide theme-shop-information-carousel--desktop"
                    data-controller="carousel"
                    data-carousel-type-value="shop-info"
                    data-carousel-peek-value="{{ blockCount > 1 ? 'true' : 'false' }}"
                    role="group"
                    aria-label="{{ 'shop.information_blocks_label'|trans }}">
                    <div class="splide__track">
                        <div class="splide__list">
                            {% for block in blocks %}
                                <div class="splide__slide">
                                    {% include 'components/shop/_information_block_card.html.twig' with { block: block } only %}
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            {% else %}
                <div class="theme-shop-information-grid theme-shop-information-grid--{{ blockCount }}{% if blockCount > 1 %} theme-shop-information-grid--desktop-only{% endif %}">
                    {% for block in blocks %}
                        {% include 'components/shop/_information_block_card.html.twig' with { block: block } only %}
                    {% endfor %}
                </div>
            {% endif %}
        </section>
    {% endif %}
</div>
