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

{% block main %}
    {% include "components/bread-crumbs.twig" %}
    
    <div class="heading-super-big-title">Результаты поиска</div>

    <section class="content-with-filter-section">
        <div class="content-with-filter-aside">
            <form class="products-filter-container">
                <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">
                    <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>
                </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">
            <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="products-with-ads-container products-with-ads-container--empty">
                <div class="search-products-empty-container">
                    <img src="/images/search.png" alt="" srcset="/images/search@2x.png 2x" class="search-products-empty-icon">
                    <span class="search-products-empty-title">Ничего не найдено</span>
                    <p class="search-products-empty-desc">По вашему запросу ничего не нашлось, попробуйте изменить параметры поиска</p>
                    <button class="search-products-empty-btn">Очистить поиск</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 %}