<section class="content-with-slider-section examples-work-section">
    <div class="content-with-slider-section__head">
        <span class="content-with-slider-section__title">Примеры наших работ</span>
        <button class="content-with-slider-section__head__btn">
            <span class="content-with-slider-section__head__btn__label" data-desktop-text="Показать все"><i>Все</i></span>
            <svg class="content-with-slider-section__head__btn__icon"><use xlink:href="/sprite.svg#angle-right"></use></svg>
        </button>
    </div>

    <div class="examples-work-section__wrapper" x-data="{ tagActive: 'Все марки' }">
        <div class="examples-work-section__tags" data-examples-work-tags-slider>
            <div class="swiper-slider">
                <div class="swiper-wrapper">
                    {% for item in ["Все марки", "Kia", "Hyundai", "ГАЗ", "Ford", "Toyota", "BMW", "Nissan", "Suzuki"] %}
                        <button class="swiper-slide examples-work-section__tag" :class="{ active: tagActive === $el.innerText }" @click.prevent="tagActive = $el.innerText">{{ item }}</button>
                    {% endfor %}
                </div>
            </div>
        </div>

        <div class="content-with-slider-section__slider" data-examples-work-slider x-show="tagActive === 'Все марки'">
            <div class="swiper-slider">
                <div class="swiper-wrapper" data-gallery-slider-items-popup>
                    {% for item in range(1, 2) %}
                        {% for item in range(1, 3) %}
                            <div class="swiper-slide examples-work-section__slide" data-gallery-slider-item-popup>
                                <img src="/images/examples/{{ item }}.png" alt="">
                            </div>
                        {% endfor %}
                    {% endfor %}
                </div>
                <div class="swiper-pagination custom-swiper-pagination"></div>
                <button class="slider-nav-btn slider-nav-btn--prev" data-slide-nav-btn-prev>
                    <svg class="slider-nav-btn__icon"><use xlink:href="/sprite.svg#angle-right"></use></svg>
                </button>
                <button class="slider-nav-btn slider-nav-btn--next" data-slide-nav-btn-next>
                    <svg class="slider-nav-btn__icon"><use xlink:href="/sprite.svg#angle-right"></use></svg>
                </button>
            </div>
        </div>
    </div>
</section>