{% extends 'layouts/main.twig' %}

{% block main %}
    {% include "components/bread-crumbs.twig" %}
    
    <div class="heading-super-big-title">АКБ для легковых автомобилей</div>

    <div class="horizontal-labels-container">
        <span class="horizontal-labels-title">Часто ищут</span>
        <div class="horizontal-labels-content" data-horizontal-labels-slider>
            <div class="swiper-slider">
                <div class="swiper-wrapper">
                    {% for item in ["12 В", "Для дизельных двигателей", "Ca-Ca", "Кислотные", "Свинцовые", "Для ВАЗ", "Для Lada", "Мини АКБ", "Delkor 60Ач", "От 60 до 80Ah"] %}
                        <div class="swiper-slide">
                            <button class="horizontal-labels-item">{{ item }}</button>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <section class="content-with-filter-section">
        <div class="content-with-filter-aside">
            <div class="selected-car-aside-block">
                <span class="selected-car-aside-block__title">Ваш автомобиль</span>
                <svg class="selected-car-aside-block__icon"><use xlink:href="/sprite.svg#angle-right"></use></svg>
                <ul class="selected-car-aside-block__content">
                    <li><span>Марка</span><span>Geely</span></li>
                    <li><span>Модель</span><span>Atlas</span></li>
                    <li><span>Поколение</span><span>II SUV/2023-2025</span></li>
                    <li><span>Модификация</span><span>2.0 Бензин</span></li>
                </ul>
            </div>

            <form class="products-filter-container" data-form-filter-change>
                <div class="products-filter-block">
                    <div class="products-filter-block__head">
                        <span class="products-filter-block__head__title">Подбор по авто</span>
                    </div>
                    <div class="products-filter-block__content products-filter-block__content--gap10">
                        <div class="input-wrapper input-wrapper--primary input-select" x-data="{ opened: false }" :class="{ opened }" @click="opened = !opened" @mousedown.outside="opened = false">
                            <input type="text" value="Geely" placeholder="" disabled class="input-default" x-ref="input">
                            <span class="input-placeholder">Марка</span>
                            <svg class="input-select-arrow"><use xlink:href="/sprite.svg#angle-bottom"></use></svg>
                            <ul class="input-select-list" :class="{ opened }">
                                <li class="input-select-list__item" @click="$refs.input.value = $el.innerText">Geely</li>
                            </ul>
                        </div>
                        <div class="input-wrapper input-wrapper--primary input-select" x-data="{ opened: false }" :class="{ opened }" @click="opened = !opened" @mousedown.outside="opened = false">
                            <input type="text" value="Atlas" placeholder="" disabled class="input-default" x-ref="input">
                            <span class="input-placeholder">Модель</span>
                            <svg class="input-select-arrow"><use xlink:href="/sprite.svg#angle-bottom"></use></svg>
                            <ul class="input-select-list" :class="{ opened }">
                                <li class="input-select-list__item" @click="$refs.input.value = $el.innerText">Atlas</li>
                            </ul>
                        </div>
                        <div class="input-wrapper input-wrapper--primary input-select" x-data="{ opened: false }" :class="{ opened }" @click="opened = !opened" @mousedown.outside="opened = false">
                            <input type="text" value="II SUV/2023-2025" placeholder="" disabled class="input-default" x-ref="input">
                            <span class="input-placeholder">Поколение</span>
                            <svg class="input-select-arrow"><use xlink:href="/sprite.svg#angle-bottom"></use></svg>
                            <ul class="input-select-list" :class="{ opened }">
                                <li class="input-select-list__item" @click="$refs.input.value = $el.innerText">II SUV/2023-2025</li>
                            </ul>
                        </div>
                        <div class="input-wrapper input-wrapper--primary input-select" x-data="{ opened: false }" :class="{ opened }" @click="opened = !opened" @mousedown.outside="opened = false">
                            <input type="text" value="2.0 Бензин" placeholder="" disabled class="input-default" x-ref="input">
                            <span class="input-placeholder">Модификация</span>
                            <svg class="input-select-arrow"><use xlink:href="/sprite.svg#angle-bottom"></use></svg>
                            <ul class="input-select-list" :class="{ opened }">
                                <li class="input-select-list__item" @click="$refs.input.value = $el.innerText">2.0 Бензин</li>
                            </ul>
                        </div>
                        <button class="products-filter-block__submit-btn">Подобрать</button>
                    </div>
                </div>
                <div class="products-filter-block" x-data="{ visible: true }" :class="{ visible }">
                    <div class="products-filter-block__head" @click="visible = !visible">
                        <span class="products-filter-block__head__title">Цена, ₽</span>
                        <svg class="products-filter-block__head__icon"><use xlink:href="sprite.svg#angle-bottom"></use></svg>
                    </div>
                    <div class="products-filter-block__content products-filter-block__content--gap10" x-show="visible">
                        <div class="price-multi-range" x-data="priceMultiRange">
                            <div class="price-multi-range__group">
                                <div class="price-multi-range__input-wrapper" data-input-placeholder="От">
                                    <input type="text" maxlength="5" x-on:input="mintrigger" x-model="minprice">
                                </div>
                                <div class="price-multi-range__input-wrapper" data-input-placeholder="До">
                                    <input type="text" maxlength="5" x-on:input="maxtrigger" x-model="maxprice">
                                </div>
                            </div>
                            <div>
                                <input type="range" step="100" :min="min" :max="max" x-on:input="mintrigger" x-model="minprice" class="price-multi-range__input-hidden">
                                <input type="range"  step="100" :min="min" :max="max" x-on:input="maxtrigger" x-model="maxprice" class="price-multi-range__input-hidden">
                                <div class="price-multi-range__slide">
                                    <div class="price-multi-range__slide__bg"></div>
                                    <div class="price-multi-range__slide__bg-active" :style="'right:'+maxthumb+'%; left:'+minthumb+'%'"></div>
                                    <div class="price-multi-range__dot-left" :style="'left: '+minthumb+'%'"></div>
                                    <div class="price-multi-range__dot-right" :style="'right: '+maxthumb+'%'"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="products-filter-block" x-data="{ visible: true }" :class="{ visible }">
                    <div class="products-filter-block__head" @click="visible = !visible">
                        <span class="products-filter-block__head__title">Бренд</span>
                        <svg class="products-filter-block__head__icon"><use xlink:href="sprite.svg#angle-bottom"></use></svg>
                    </div>
                    <div class="products-filter-block__content products-filter-block__content--gap6" x-data="{ show: false }" x-show="visible">
                        <label class="input-checkbox input-checkbox--primary">
                            <input type="checkbox">
                            <div class="input-checkbox__box"></div>
                            <div class="products-filter-block__brand-item">
                                <div class="products-filter-block__brand-item__img">
                                    <img src="/images/assort-brands/alphaline.png" alt="" srcset="/images/assort-brands/alphaline@2x.png 2x">
                                </div>
                                <span class="products-filter-block__brand-item__name">Alphaline</span>
                            </div>
                        </label>
                        <label class="input-checkbox input-checkbox--primary">
                            <input type="checkbox">
                            <div class="input-checkbox__box"></div>
                            <div class="products-filter-block__brand-item">
                                <div class="products-filter-block__brand-item__img">
                                    <img src="/images/assort-brands/delkor.png" alt="" srcset="/images/assort-brands/delkor@2x.png 2x">
                                </div>
                                <span class="products-filter-block__brand-item__name">Delkor</span>
                            </div>
                        </label>
                        <label class="input-checkbox input-checkbox--primary">
                            <input type="checkbox">
                            <div class="input-checkbox__box"></div>
                            <div class="products-filter-block__brand-item">
                                <div class="products-filter-block__brand-item__img">
                                    <img src="/images/assort-brands/mutlu.png" alt="" srcset="/images/assort-brands/mutlu@2x.png 2x">
                                </div>
                                <span class="products-filter-block__brand-item__name">Mutlu</span>
                            </div>
                        </label>
                        <label class="input-checkbox input-checkbox--primary">
                            <input type="checkbox">
                            <div class="input-checkbox__box"></div>
                            <div class="products-filter-block__brand-item">
                                <div class="products-filter-block__brand-item__img">
                                    <img src="/images/assort-brands/tab.png" alt="" srcset="/images/assort-brands/tab@2x.png 2x">
                                </div>
                                <span class="products-filter-block__brand-item__name">Tab</span>
                            </div>
                        </label>
                        <label class="input-checkbox input-checkbox--primary">
                            <input type="checkbox">
                            <div class="input-checkbox__box"></div>
                            <div class="products-filter-block__brand-item">
                                <div class="products-filter-block__brand-item__img">
                                    <img src="/images/assort-brands/bosch.png" alt="" srcset="/images/assort-brands/bosch@2x.png 2x">
                                </div>
                                <span class="products-filter-block__brand-item__name">Bosch</span>
                            </div>
                        </label>
                        <label class="input-checkbox input-checkbox--primary">
                            <input type="checkbox">
                            <div class="input-checkbox__box"></div>
                            <div class="products-filter-block__brand-item">
                                <div class="products-filter-block__brand-item__img">
                                    <img src="/images/assort-brands/bars.png" alt="" srcset="/images/assort-brands/bars@2x.png 2x">
                                </div>
                                <span class="products-filter-block__brand-item__name">Bars</span>
                            </div>
                        </label>
                        <label class="input-checkbox input-checkbox--primary">
                            <input type="checkbox">
                            <div class="input-checkbox__box"></div>
                            <div class="products-filter-block__brand-item">
                                <div class="products-filter-block__brand-item__img">
                                    <img src="/images/assort-brands/topla.png" alt="" srcset="/images/assort-brands/topla@2x.png 2x">
                                </div>
                                <span class="products-filter-block__brand-item__name">Topla</span>
                            </div>
                        </label>
                        <template x-if="show">
                            <div class="products-filter-block__content products-filter-block__content--gap6">
                                <label class="input-checkbox input-checkbox--primary">
                                    <input type="checkbox">
                                    <div class="input-checkbox__box"></div>
                                    <div class="products-filter-block__brand-item">
                                        <div class="products-filter-block__brand-item__img">
                                            <img src="/images/assort-brands/alphaline.png" alt="" srcset="/images/assort-brands/alphaline@2x.png 2x">
                                        </div>
                                        <span class="products-filter-block__brand-item__name">Alphaline</span>
                                    </div>
                                </label>
                                <label class="input-checkbox input-checkbox--primary">
                                    <input type="checkbox">
                                    <div class="input-checkbox__box"></div>
                                    <div class="products-filter-block__brand-item">
                                        <div class="products-filter-block__brand-item__img">
                                            <img src="/images/assort-brands/delkor.png" alt="" srcset="/images/assort-brands/delkor@2x.png 2x">
                                        </div>
                                        <span class="products-filter-block__brand-item__name">Delkor</span>
                                    </div>
                                </label>
                                <label class="input-checkbox input-checkbox--primary">
                                    <input type="checkbox">
                                    <div class="input-checkbox__box"></div>
                                    <div class="products-filter-block__brand-item">
                                        <div class="products-filter-block__brand-item__img">
                                            <img src="/images/assort-brands/mutlu.png" alt="" srcset="/images/assort-brands/mutlu@2x.png 2x">
                                        </div>
                                        <span class="products-filter-block__brand-item__name">Mutlu</span>
                                    </div>
                                </label>
                                <label class="input-checkbox input-checkbox--primary">
                                    <input type="checkbox">
                                    <div class="input-checkbox__box"></div>
                                    <div class="products-filter-block__brand-item">
                                        <div class="products-filter-block__brand-item__img">
                                            <img src="/images/assort-brands/tab.png" alt="" srcset="/images/assort-brands/tab@2x.png 2x">
                                        </div>
                                        <span class="products-filter-block__brand-item__name">Tab</span>
                                    </div>
                                </label>
                                <label class="input-checkbox input-checkbox--primary">
                                    <input type="checkbox">
                                    <div class="input-checkbox__box"></div>
                                    <div class="products-filter-block__brand-item">
                                        <div class="products-filter-block__brand-item__img">
                                            <img src="/images/assort-brands/bosch.png" alt="" srcset="/images/assort-brands/bosch@2x.png 2x">
                                        </div>
                                        <span class="products-filter-block__brand-item__name">Bosch</span>
                                    </div>
                                </label>
                                <label class="input-checkbox input-checkbox--primary">
                                    <input type="checkbox">
                                    <div class="input-checkbox__box"></div>
                                    <div class="products-filter-block__brand-item">
                                        <div class="products-filter-block__brand-item__img">
                                            <img src="/images/assort-brands/bars.png" alt="" srcset="/images/assort-brands/bars@2x.png 2x">
                                        </div>
                                        <span class="products-filter-block__brand-item__name">Bars</span>
                                    </div>
                                </label>
                                <label class="input-checkbox input-checkbox--primary">
                                    <input type="checkbox">
                                    <div class="input-checkbox__box"></div>
                                    <div class="products-filter-block__brand-item">
                                        <div class="products-filter-block__brand-item__img">
                                            <img src="/images/assort-brands/topla.png" alt="" srcset="/images/assort-brands/topla@2x.png 2x">
                                        </div>
                                        <span class="products-filter-block__brand-item__name">Topla</span>
                                    </div>
                                </label>
                            </div>
                        </template>
                        <button type="button" class="products-filter-block__more-btn products-filter-block__more-btn--mt10" @click="show = !show">
                            <span x-text="show ? 'Скрыть' : 'Показать все'">Показать все</span>
                            <svg><use xlink:href="/sprite.svg#angle-bottom" x-bind:href="show ? '/sprite.svg#angle-top' : '/sprite.svg#angle-bottom'"></use></svg>
                        </button>
                    </div>
                </div>
                <div class="products-filter-block" x-data="{ visible: true }" :class="{ visible }">
                    <div class="products-filter-block__head" @click="visible = !visible">
                        <span class="products-filter-block__head__title">Емкость, А/ч</span>
                        <svg class="products-filter-block__head__icon"><use xlink:href="sprite.svg#angle-bottom"></use></svg>
                    </div>
                    <div class="products-filter-block__content products-filter-block__content--row-wrap products-filter-block__content--gap10-32" x-data="{ show: false }" x-show="visible">
                        {% for item in range(32, 32 + 14) %}
                            <label class="input-checkbox input-checkbox--primary">
                                <input type="checkbox">
                                <div class="input-checkbox__box"></div>
                                <p class="input-checkbox__text">{{ item }}</p>
                            </label>
                        {% endfor %}
                        <template x-if="show">
                            <div class="products-filter-block__content products-filter-block__content--row-wrap products-filter-block__content--gap10-32">
                                {% for item in range(32 + 15, 32 + 15 + 14) %}
                                    <label class="input-checkbox input-checkbox--primary">
                                        <input type="checkbox">
                                        <div class="input-checkbox__box"></div>
                                        <p class="input-checkbox__text">{{ item }}</p>
                                    </label>
                                {% endfor %}
                            </div>
                        </template>
                        <button type="button" class="products-filter-block__more-btn products-filter-block__more-btn--mt6" @click="show = !show">
                            <span x-text="show ? 'Скрыть' : 'Показать все'">Показать все</span>
                            <svg><use xlink:href="/sprite.svg#angle-bottom" x-bind:href="show ? '/sprite.svg#angle-top' : '/sprite.svg#angle-bottom'"></use></svg>
                        </button>
                    </div>
                </div>
                <div class="products-filter-block" x-data="{ visible: true }" :class="{ visible }">
                    <div class="products-filter-block__head" @click="visible = !visible">
                        <span class="products-filter-block__head__title">Полярность</span>
                        <svg class="products-filter-block__head__icon"><use xlink:href="sprite.svg#angle-bottom"></use></svg>
                    </div>
                    <div class="products-filter-block__content products-filter-block__content--gap10" x-data="{ show: false }" x-show="visible">
                        {% for item in ["Прямая", "Обратная", "Универсальная"] %}
                            <label class="input-checkbox input-checkbox--primary">
                                <input type="checkbox">
                                <div class="input-checkbox__box"></div>
                                <p class="input-checkbox__text">{{ item }}</p>
                            </label>
                        {% endfor %}
                    </div>
                </div>
                {% for item in ["Пусковой ток, А", "Ширина", "Высота", "Длина", "Страна", "Тип корпуса", "Технология", "Тип токовывода", "Гарантия", "Серия", "Тип клеммы", "В наличии", "Система start-stop", "Самовывоз с точки"] %}
                    <div class="products-filter-block" x-data="{ visible: false }" :class="{ visible }">
                        <div class="products-filter-block__head" @click="visible = !visible">
                            <span class="products-filter-block__head__title">{{ item }}</span>
                            <svg class="products-filter-block__head__icon"><use xlink:href="sprite.svg#angle-bottom"></use></svg>
                        </div>
                        <div class="products-filter-block__content products-filter-block__content--gap10" x-data="{ show: false }" x-show="visible">
                            {% for item in ["Прямая", "Обратная", "Универсальная"] %}
                                <label class="input-checkbox input-checkbox--primary">
                                    <input type="checkbox">
                                    <div class="input-checkbox__box"></div>
                                    <p class="input-checkbox__text">{{ item }}</p>
                                </label>
                            {% endfor %}
                        </div>
                    </div>
                {% endfor %}
                <div class="products-filter-block products-filter-block--lasted" x-data="{ visible: false }" :class="{ visible }">
                    <div class="products-filter-block__head" @click="visible = !visible">
                        <span class="products-filter-block__head__title">Тип крепления</span>
                        <svg class="products-filter-block__head__icon"><use xlink:href="sprite.svg#angle-bottom"></use></svg>
                    </div>
                    <div class="products-filter-block__content products-filter-block__content--gap10" x-data="{ show: false }" x-show="visible">
                        {% for item in ["Прямая", "Обратная", "Универсальная"] %}
                            <label class="input-checkbox input-checkbox--primary">
                                <input type="checkbox">
                                <div class="input-checkbox__box"></div>
                                <p class="input-checkbox__text">{{ item }}</p>
                            </label>
                        {% endfor %}
                    </div>
                </div>
                <button class="products-filter-apply-btn">Применить фильтры</button>
                <button type="button" class="button-with-desc products-filter-help-btn" data-modal-btn="421b3c66-7bb4-460b-8437-0330f1057f02">
                    <div class="button-with-desc__main">
                        <span>Нет нужного фильтра?</span>
                        <p>Подскажите какой добавить</p>
                    </div>
                    <div class="button-with-desc__icon">
                        <svg><use xlink:href="/sprite.svg#angle-right"></use></svg>
                    </div>
                    <template data-modal-idx="421b3c66-7bb4-460b-8437-0330f1057f02">
                        <div class="modal-default feedback-modal">
                            <button class="modal-default__close-btn">
                                <svg><use xlink:href="/sprite.svg#close"></use></svg>
                            </button>
                            <div class="feedback-modal__content">
                                <div class="feedback-modal__head">
                                    <span class="feedback-modal__head__title">Помочь с подбором аккумулятора?</span>
                                    <p class="feedback-modal__head__desc">Оставьте свой номер, а наш консультант поможет выбрать подходящий вариант и подскажет, как сэкономить</p>
                                </div>
                                <form class="feedback-modal__form">
                                    <div class="feedback-modal__form__grid">
                                        <div class="input-wrapper feedback-modal__form__input">
                                            <input type="text" placeholder="" class="input-default" x-data="" x-mask="+7 999 999-99-99">
                                            <span class="input-placeholder">Номер телефона</span>
                                        </div>
                                        <div class="input-wrapper feedback-modal__form__input">
                                            <input type="text" placeholder="" class="input-default">
                                            <span class="input-placeholder">Ваше имя (необязательно)</span>
                                        </div>
                                        <button class="feedback-modal__form__submit-btn">Жду звонка</button>
                                    </div>
                                    <label class="input-checkbox feedback-modal__form__terms">
                                        <input type="checkbox">
                                        <div class="input-checkbox__box"></div>
                                        <p class="input-checkbox__text">Нажимая кнопку «Отправить», вы соглашаетесь с Политикой конфиденциальности </p>
                                    </label>
                                </form>
                            </div>
                        </div>
                    </template>
                </button>
            </form>

            <div class="popular-articles-aside-block">
                <span class="popular-articles-aside-block__title">Популярные статьи</span>
                <ul class="popular-articles-aside-block__list">
                    <li class="popular-articles-aside-block__item">
                        <a href="" class="popular-articles-aside-block__item__title">Как правильно заряжать автомобильный аккумулятор</a>
                        <div class="popular-articles-aside-block__item__footer">
                            <div class="popular-articles-aside-block__item__views-counter">
                                <svg><use xlink:href="/sprite.svg#eye"></use></svg>
                                <span>123</span>
                            </div>
                            <span class="popular-articles-aside-block__item__date">10 августа 2025</span>
                        </div>
                    </li>
                    <li class="popular-articles-aside-block__item">
                        <a href="" class="popular-articles-aside-block__item__title">Зарядные устройства для автомобильных аккумуляторов</a>
                        <div class="popular-articles-aside-block__item__footer">
                            <div class="popular-articles-aside-block__item__views-counter">
                                <svg><use xlink:href="/sprite.svg#eye"></use></svg>
                                <span>123</span>
                            </div>
                            <span class="popular-articles-aside-block__item__date">10 августа 2025</span>
                        </div>
                    </li>
                    <li class="popular-articles-aside-block__item">
                        <a href="" class="popular-articles-aside-block__item__title">Какой аккумулятор устанавливается на Ауди А6 С5</a>
                        <div class="popular-articles-aside-block__item__footer">
                            <div class="popular-articles-aside-block__item__views-counter">
                                <svg><use xlink:href="/sprite.svg#eye"></use></svg>
                                <span>123</span>
                            </div>
                            <span class="popular-articles-aside-block__item__date">10 августа 2025</span>
                        </div>
                    </li>
                </ul>
                <a href="" class="popular-articles-aside-block__go-link">
                    <span>Смотреть все</span>
                    <svg><use xlink:href="/sprite.svg#angle-right"></use></svg>
                </a>
            </div>
        </div>

        <div 
            class="products-wrapper" 
            x-data="{
                more() {
                    const list = $el.querySelector('.products-with-ads-container')
                    list.innerHTML += list.innerHTML
                }
            }"
        >
            <div class="products-control-container">
                <div class="input-wrapper input-select products-control-container__select" x-data="{ opened: false }" :class="{ opened }" @click.prevent="opened = !opened" @mousedown.outside="opened = false">
                    <input type="text" value="По популярности" placeholder="" disabled class="input-default" x-ref="input">
                    <span class="input-placeholder">Сортировать</span>
                    <svg class="input-select-arrow"><use xlink:href="/sprite.svg#angle-bottom"></use></svg>
                    <ul class="input-select-list" :class="{ opened }">
                        <li class="input-select-list__item" @click="$refs.input.value = $el.innerText">По популярности</li>
                    </ul>
                </div>

                <div class="tumbler-with-label-container">
                    <label class="input-tumbler">
                        <input type="checkbox" x-model="discount">
                        <div class="input-tumbler__box"></div>
                        <p class="input-tumbler__text">Хочу сдать свой аккумулятор</p>
                    </label>
                    <div class="tumbler-with-label-container__label">Выгодно</div>
                </div>

                <div class="products-applied-filters-container">
                    {% for item in ["35 Ач", "Alphaline", "В наличии", "Прямая полярность"] %}
                        <button class="products-applied-filters-btn">
                            <span>{{ item }}</span>
                            <svg><use xlink:href="sprite.svg#close"></use></svg>
                        </button>
                    {% endfor %}
                </div>

                <button class="products-control-container__control-btn" data-dropdown-tippy x-data="{ selected: 'По популярности' }" @selectsort.window="selected = $event.detail.selected">
                    <span x-text="selected"></span>
                    <svg><use xlink:href="/sprite.svg#angle-bottom"></use></svg>
                    <template data-dropdown-template-tippy>
                        <div class="dropdown-links" x-data>
                            {% for item in ["По популярности", "По стоимости"] %}
                                <button class="dropdown-link" @click="$dispatch('selectsort', { selected: $el.innerText })">{{ item }}</button>
                            {% endfor %}
                        </div>
                    </template>
                </button>

                <button class="products-control-container__control-btn">
                    <span>Фильтры</span>
                    <svg><use xlink:href="/sprite.svg#filter"></use></svg>
                </button>
            </div>

            <div class="selected-car-aside-block">
                <span class="selected-car-aside-block__title">Ваш автомобиль</span>
                <svg class="selected-car-aside-block__icon"><use xlink:href="/sprite.svg#angle-right"></use></svg>
                <div class="selected-car-aside-block__content">
                    <b>Geely Atlas</b>
                    <span>II SUV/2023-2025</span>
                    <span>2.0 Бензин</span>
                </div>
            </div>
            
            <div class="products-with-ads-container">
                {% for item in range(1, 2) %}
                    {% for item in range(1, 4) %}
                        <div class="product-item">
                            <div class="product-item__photo-wrapper">
                                <img src="/images/products/p-{{ item }}.png" alt="" srcset="/images/products/p-{{ item }}@2x.png 2x" class="product-item__photo-img">
                                <div class="product-item__guarantee-label">
                                    <svg><use xlink:href="/sprite.svg#security"></use></svg>
                                    <span>12 мес</span>
                                </div>
                                <div class="product-item__control-labels">
                                    <button class="product-item__control-label" :class="{ 'active-heart': active }" x-data="{ active: false }" @click.prevent="active = !active">
                                        <svg><use x-bind:href="'/sprite.svg#' + (active ? 'heart-fill' : 'control-heart')"></use></svg>
                                    </button>
                                    <button class="product-item__control-label" :class="{ 'active-compare': active }" x-data="{ active: false }" @click.prevent="active = !active">
                                        <svg><use x-bind:href="'/sprite.svg#' + (active ? 'signal-fill' : 'control-signal')"></use></svg>
                                    </button>
                                </div>
                                <button class="product-item__preview-btn" data-product-popup-button="8d473b5f-efe0-4d89-bd0e-308ce68ca514">
                                    <svg><use xlink:href="/sprite.svg#eye"></use></svg>
                                    <span>Быстрый просмотр</span>
                                </button>
                            </div>
                            <div class="product-item__content">
                                <div class="product-item__main">
                                    <ul class="product-item__stat">
                                        <li class="product-item__stat__rate">
                                            <svg class="product-item__stat__rate__icon"><use xlink:href="/sprite.svg#product-star"></use></svg>
                                            <span class="product-item__stat__rate__num">4,9</span>
                                        </li>
                                        <li class="product-item__stat__status product-item__stat__status--green"><span>В наличии</span></li>
                                        <li class="product-item__stat__pr">Словения</li>
                                    </ul>
                                    <a href="" class="product-item__name">Delkor 75D23L 65Ач 550А, ОП, стандартные клеммы</a>
                                    <ul class="product-item__params">
                                        <li class="product-item__param-text product-item__param-text--fill">
                                            250х175х225 мм
                                        </li>
                                        <li class="product-item__param-acc">
                                            <svg class="product-item__param-acc__icon"><use xlink:href="/sprite.svg#battery-md"></use></svg>
                                            <span class="product-item__param-acc__text">75Ач</span>
                                        </li>
                                        <li class="product-item__param-text">
                                            Обратная полярность
                                        </li>
                                    </ul>
                                </div>
                                <button class="product-item__add-to-cart-btn" data-product-in-cart-popup-btn="a1b2c3d4-1111-4000-a000-000000000001">
                                    <svg class="product-item__add-to-cart-btn__icon"><use xlink:href="/sprite.svg#cart"></use></svg>
                                    <span class="product-item__add-to-cart-btn__text">6 400 ₽</span>
                                </button>
                            </div>
                            <template data-product-popup="8d473b5f-efe0-4d89-bd0e-308ce68ca514">
                                {% include "/components/product-popup.twig" %}
                            </template>
                            <template data-product-in-cart-popup="a1b2c3d4-1111-4000-a000-000000000001">
                                {% include "components/product-in-cart-popup.twig" %}
                            </template>
                        </div>
                    {% endfor %}
                {% endfor %}

                <a href="" class="product-ads-item">
                    <span class="product-ads-item__title">Доставка курьером или самовывоз</span>
                    <p class="product-ads-item__desc">Доставляем заказы собственной курьерской службой по Москве и за МКАД</p>
                    <span class="product-ads-item__label">
                        <span>Подробнее</span>
                        <svg><use xlink:href="/sprite.svg#angle-right"></use></svg>
                    </span>
                </a>

                {% for item in range(1, 2) %}
                    {% for item in range(1, 4) %}
                        <div class="product-item">
                            <div class="product-item__photo-wrapper">
                                <img src="/images/products/p-{{ item }}.png" alt="" srcset="/images/products/p-{{ item }}@2x.png 2x" class="product-item__photo-img">
                                <div class="product-item__guarantee-label">
                                    <svg><use xlink:href="/sprite.svg#security"></use></svg>
                                    <span>12 мес</span>
                                </div>
                                <div class="product-item__control-labels">
                                    <button class="product-item__control-label" :class="{ 'active-heart': active }" x-data="{ active: false }" @click.prevent="active = !active">
                                        <svg><use x-bind:href="'/sprite.svg#' + (active ? 'heart-fill' : 'control-heart')"></use></svg>
                                    </button>
                                    <button class="product-item__control-label" :class="{ 'active-compare': active }" x-data="{ active: false }" @click.prevent="active = !active">
                                        <svg><use x-bind:href="'/sprite.svg#' + (active ? 'signal-fill' : 'control-signal')"></use></svg>
                                    </button>
                                </div>
                                <button class="product-item__preview-btn" data-product-popup-button="8d473b5f-efe0-4d89-bd0e-308ce68ca514">
                                    <svg><use xlink:href="/sprite.svg#eye"></use></svg>
                                    <span>Быстрый просмотр</span>
                                </button>
                            </div>
                            <div class="product-item__content">
                                <div class="product-item__main">
                                    <ul class="product-item__stat">
                                        <li class="product-item__stat__rate">
                                            <svg class="product-item__stat__rate__icon"><use xlink:href="/sprite.svg#product-star"></use></svg>
                                            <span class="product-item__stat__rate__num">4,9</span>
                                        </li>
                                        <li class="product-item__stat__status product-item__stat__status--green"><span>В наличии</span></li>
                                        <li class="product-item__stat__pr">Словения</li>
                                    </ul>
                                    <a href="" class="product-item__name">Delkor 75D23L 65Ач 550А, ОП, стандартные клеммы</a>
                                    <ul class="product-item__params">
                                        <li class="product-item__param-text product-item__param-text--fill">
                                            250х175х225 мм
                                        </li>
                                        <li class="product-item__param-acc">
                                            <svg class="product-item__param-acc__icon"><use xlink:href="/sprite.svg#battery-md"></use></svg>
                                            <span class="product-item__param-acc__text">75Ач</span>
                                        </li>
                                        <li class="product-item__param-text">
                                            Обратная полярность
                                        </li>
                                    </ul>
                                </div>
                                <button class="product-item__add-to-cart-btn" data-product-in-cart-popup-btn="b2c3d4e5-2222-4000-b000-000000000002">
                                    <svg class="product-item__add-to-cart-btn__icon"><use xlink:href="/sprite.svg#cart"></use></svg>
                                    <span class="product-item__add-to-cart-btn__text">6 400 ₽</span>
                                </button>
                            </div>
                            <template data-product-popup="8d473b5f-efe0-4d89-bd0e-308ce68ca514">
                                {% include "/components/product-popup.twig" %}
                            </template>
                            <template data-product-in-cart-popup="b2c3d4e5-2222-4000-b000-000000000002">
                                {% include "components/product-in-cart-popup.twig" %}
                            </template>
                        </div>
                    {% endfor %}
                {% endfor %}
            </div>

            <div class="items-pagination-container">
                <button class="items-pagination-load-more-btn" @click.prevent="more">Показать ещё</button>
                <div class="items-pagination-nav">
                    <button class="items-pagination-nav-btn">
                        <svg><use xlink:href="/sprite.svg#angle-left"></use></svg>
                    </button>
                    <div class="items-pagination-nav-list">
                        <a href="" class="items-pagination-nav-item">1</a>
                        <a href="" class="items-pagination-nav-item active">2</a>
                        <a href="" class="items-pagination-nav-item">3</a>
                        <a href="" class="items-pagination-nav-item">...</a>
                        <a href="" class="items-pagination-nav-item">10</a>
                    </div>
                    <button class="items-pagination-nav-btn">
                        <svg><use xlink:href="/sprite.svg#angle-right"></use></svg>
                    </button>
                </div>
            </div>
        </div>
    </section>

    {% include "components/popular-brands-akb-section.twig" %}

    {% include "components/products-slider-section.twig" with { 
        productsSliderTitle: "Вы недавно смотрели",
        productsSliderMoreHide: true
    } %}

    {% include "components/seo-text-section.twig" %}

    {% include "components/selection-help-section.twig" %}
{% endblock %}