<section class="assort-batteries-section" x-data="{ tab: '1' }">
    <div class="assort-batteries-section__head">
        <div class="assort-batteries-section__head__title">
            <span>Подбор аккумулятора</span>
            <p>Подбрерите подходящий АКБ в пару кликов</p>
        </div>

        <div class="tab-switcher-container">
            <label class="tab-switcher-item">
                <input type="radio" name="sort-type-batteries" value="1" checked class="tab-switcher-item-input" x-model="tab">
                <div class="tab-switcher-item-container">
                    <span class="tab-switcher-item-value">По автомобилю</span>
                </div>
            </label>
            <label class="tab-switcher-item">
                <input type="radio" name="sort-type-batteries" value="2" class="tab-switcher-item-input" x-model="tab">
                <div class="tab-switcher-item-container">
                    <span class="tab-switcher-item-value">По параметрам</span>
                </div>
            </label>
        </div>

        <button class="assort-batteries-section__head__help">
            <div class="assort-batteries-section__head__help__main" data-modal-btn="df717451-bbcf-42ce-b8a4-bf0dee5c27c2">
                <span>Нужна помощь?</span>
                <p>Бесплатная консультация</p>
                <template data-modal-idx="df717451-bbcf-42ce-b8a4-bf0dee5c27c2">
                    {% include "modals/help-akb.twig" %}
                </template>
            </div>
            <div class="assort-batteries-section__head__help__icon">
                <svg><use xlink:href="/sprite.svg#angle-right"></use></svg>
            </div>
        </button>
    </div>

    <div class="assort-batteries-section__tab" x-show="tab === '1'">
        <form action="" class="assort-batteries-section__form">
            <div class="assort-batteries-section__form__inputs">
                <div class="input-wrapper input-wrapper--primary input-select" x-data="{ opened: false }" :class="{ opened }" @click.prevent="opened = !opened" @click.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.prevent="opened = !opened" @click.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.prevent="opened = !opened" @click.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.prevent="opened = !opened" @click.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="assort-batteries-section__form__submit-btn">Подобрать</button>
            </div>
        </form>

        <div class="assort-batteries-section__popular-brands">
            <span class="assort-batteries-section__popular-brands__title">Популярные марки</span>

            <div class="assort-batteries-section__popular-brands__slider" data-assort-popular-brands-slider>
                <div class="swiper-slider">
                    <div class="swiper-wrapper">
                        <a href="" class="assort-batteries-section__popular-brands__slide swiper-slide">
                            <div class="assort-batteries-section__popular-brands__slide__img">
                                <img src="/images/car-brands/kia.png" alt="" srcset="/images/car-brands/kia@2x.png 2x">
                            </div>
                            <span class="assort-batteries-section__popular-brands__slide__name">Kia</span>
                        </a>
                        <a href="" class="assort-batteries-section__popular-brands__slide swiper-slide">
                            <div class="assort-batteries-section__popular-brands__slide__img">
                                <img src="/images/car-brands/hyundai.png" alt="" srcset="/images/car-brands/hyundai@2x.png 2x">
                            </div>
                            <span class="assort-batteries-section__popular-brands__slide__name">Hyundai</span>
                        </a>
                        <a href="" class="assort-batteries-section__popular-brands__slide swiper-slide">
                            <div class="assort-batteries-section__popular-brands__slide__img">
                                <img src="/images/car-brands/gaz.png" alt="" srcset="/images/car-brands/gaz@2x.png 2x">
                            </div>
                            <span class="assort-batteries-section__popular-brands__slide__name">ГАЗ</span>
                        </a>
                        <a href="" class="assort-batteries-section__popular-brands__slide swiper-slide">
                            <div class="assort-batteries-section__popular-brands__slide__img">
                                <img src="/images/car-brands/ford.png" alt="" srcset="/images/car-brands/ford@2x.png 2x">
                            </div>
                            <span class="assort-batteries-section__popular-brands__slide__name">Ford</span>
                        </a>
                        <a href="" class="assort-batteries-section__popular-brands__slide swiper-slide">
                            <div class="assort-batteries-section__popular-brands__slide__img">
                                <img src="/images/car-brands/toyota.png" alt="" srcset="/images/car-brands/toyota@2x.png 2x">
                            </div>
                            <span class="assort-batteries-section__popular-brands__slide__name">Toyota</span>
                        </a>
                        <a href="" class="assort-batteries-section__popular-brands__slide swiper-slide">
                            <div class="assort-batteries-section__popular-brands__slide__img">
                                <img src="/images/car-brands/bmw.png" alt="" srcset="/images/car-brands/bmw@2x.png 2x">
                            </div>
                            <span class="assort-batteries-section__popular-brands__slide__name">BMW</span>
                        </a>
                        <a href="" class="assort-batteries-section__popular-brands__slide swiper-slide">
                            <div class="assort-batteries-section__popular-brands__slide__img">
                                <img src="/images/car-brands/nissan.png" alt="" srcset="/images/car-brands/nissan@2x.png 2x">
                            </div>
                            <span class="assort-batteries-section__popular-brands__slide__name">Nissan</span>
                        </a>
                        <a href="" class="assort-batteries-section__popular-brands__slide swiper-slide">
                            <div class="assort-batteries-section__popular-brands__slide__img">
                                <img src="/images/car-brands/suzuki.png" alt="" srcset="/images/car-brands/suzuki@2x.png 2x">
                            </div>
                            <span class="assort-batteries-section__popular-brands__slide__name">Suzuki</span>
                        </a>
                        <a href="" class="assort-batteries-section__popular-brands__slide swiper-slide">
                            <div class="assort-batteries-section__popular-brands__slide__img">
                                <img src="/images/car-brands/kia.png" alt="" srcset="/images/car-brands/kia@2x.png 2x">
                            </div>
                            <span class="assort-batteries-section__popular-brands__slide__name">Kia</span>
                        </a>
                        <a href="" class="assort-batteries-section__popular-brands__slide swiper-slide">
                            <div class="assort-batteries-section__popular-brands__slide__img">
                                <img src="/images/car-brands/hyundai.png" alt="" srcset="/images/car-brands/hyundai@2x.png 2x">
                            </div>
                            <span class="assort-batteries-section__popular-brands__slide__name">Hyundai</span>
                        </a>
                        <a href="" class="assort-batteries-section__popular-brands__slide swiper-slide">
                            <div class="assort-batteries-section__popular-brands__slide__img">
                                <img src="/images/car-brands/gaz.png" alt="" srcset="/images/car-brands/gaz@2x.png 2x">
                            </div>
                            <span class="assort-batteries-section__popular-brands__slide__name">ГАЗ</span>
                        </a>
                        <a href="" class="assort-batteries-section__popular-brands__slide swiper-slide">
                            <div class="assort-batteries-section__popular-brands__slide__img">
                                <img src="/images/car-brands/ford.png" alt="" srcset="/images/car-brands/ford@2x.png 2x">
                            </div>
                            <span class="assort-batteries-section__popular-brands__slide__name">Ford</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="assort-batteries-section__tab" x-show="tab === '2'">
        <form action="" class="assort-batteries-section__form">
            <div class="assort-batteries-section__form__inputs">
                <div class="input-wrapper input-wrapper--primary input-select" x-data="{ opened: false }" :class="{ opened }" @click.prevent="opened = !opened" @click.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>
                        <li class="input-select-list__item" @click="$refs.input.value = $el.innerText">По возрастанию цены</li>
                        <li class="input-select-list__item" @click="$refs.input.value = $el.innerText">По убыванию цены</li>
                        <li class="input-select-list__item" @click="$refs.input.value = $el.innerText">По отзывам</li>
                    </ul>
                </div>

                <div class="input-group">
                    <div class="input-wrapper input-wrapper--primary" data-input-prefix="Ач">
                        <input type="text" value="45" placeholder="" x-data x-mask:dynamic="$money($input, '.', ' ')" class="input-default">
                        <span class="input-placeholder">Емкость от</span>
                    </div>
                    <div class="input-wrapper input-wrapper--primary" data-input-prefix="Ач">
                        <input type="text" value="45" placeholder="" x-data x-mask:dynamic="$money($input, '.', ' ')" class="input-default">
                        <span class="input-placeholder">Емкость до</span>
                    </div>
                </div>

                <div class="input-group">
                    <div class="input-wrapper input-wrapper--primary" data-input-prefix="А">
                        <input type="text" value="330" placeholder="" x-data x-mask:dynamic="$money($input, '.', ' ')" class="input-default">
                        <span class="input-placeholder">Пусковой ток от</span>
                    </div>
                    <div class="input-wrapper input-wrapper--primary" data-input-prefix="А">
                        <input type="text" value="1320" placeholder="" x-data x-mask:dynamic="$money($input, '.', ' ')" class="input-default">
                        <span class="input-placeholder">Пусковой ток до</span>
                    </div>
                </div>

                <button class="assort-batteries-section__form__submit-btn">Подобрать</button>
            </div>

            <div class="assort-batteries-section__form__checks">
                <label class="input-checkbox input-checkbox--primary">
                    <input type="checkbox">
                    <div class="input-checkbox__box"></div>
                    <p class="input-checkbox__text">Обратная полярность</p>
                </label>

                <label class="input-checkbox input-checkbox--primary">
                    <input type="checkbox">
                    <div class="input-checkbox__box"></div>
                    <p class="input-checkbox__text">Прямая полярность</p>
                </label>

                <label class="input-checkbox input-checkbox--primary">
                    <input type="checkbox">
                    <div class="input-checkbox__box"></div>
                    <p class="input-checkbox__text">Сделано в России</p>
                </label>
            </div>
        </form>

        <div class="assort-batteries-section__separator"></div>

        <div class="assort-batteries-section__brands-group">
            <div class="assort-batteries-section__brands-slider" data-assort-brands-slider>
                <div class="swiper-slider">
                    <div class="swiper-wrapper">
                        <a href="" class="assort-batteries-section__brand-slide swiper-slide">
                            <div class="assort-batteries-section__brand-slide__logo">
                                <img src="/images/assort-brands/alphaline.png" alt="" srcset="/images/assort-brands/alphaline@2x.png 2x" class="assort-batteries-section__brand-slide__logo-img">
                            </div>
                            <span class="assort-batteries-section__brand-slide__company">Alphaline</span>
                        </a>
                        <a href="" class="assort-batteries-section__brand-slide swiper-slide">
                            <div class="assort-batteries-section__brand-slide__logo">
                                <img src="/images/assort-brands/delkor.png" alt="" srcset="/images/assort-brands/delkor@2x.png 2x" class="assort-batteries-section__brand-slide__logo-img">
                            </div>
                            <span class="assort-batteries-section__brand-slide__company">Delkor</span>
                        </a>
                        <a href="" class="assort-batteries-section__brand-slide swiper-slide">
                            <div class="assort-batteries-section__brand-slide__logo">
                                <img src="/images/assort-brands/mutlu.png" alt="" srcset="/images/assort-brands/mutlu@2x.png 2x" class="assort-batteries-section__brand-slide__logo-img">
                            </div>
                            <span class="assort-batteries-section__brand-slide__company">Mutlu</span>
                        </a>
                        <a href="" class="assort-batteries-section__brand-slide swiper-slide">
                            <div class="assort-batteries-section__brand-slide__logo">
                                <img src="/images/assort-brands/tab.png" alt="" srcset="/images/assort-brands/tab@2x.png 2x" class="assort-batteries-section__brand-slide__logo-img">
                            </div>
                            <span class="assort-batteries-section__brand-slide__company">Tab</span>
                        </a>
                        <a href="" class="assort-batteries-section__brand-slide swiper-slide">
                            <div class="assort-batteries-section__brand-slide__logo">
                                <img src="/images/assort-brands/bosch.png" alt="" srcset="/images/assort-brands/bosch@2x.png 2x" class="assort-batteries-section__brand-slide__logo-img">
                            </div>
                            <span class="assort-batteries-section__brand-slide__company">Bosch</span>
                        </a>
                        <a href="" class="assort-batteries-section__brand-slide swiper-slide">
                            <div class="assort-batteries-section__brand-slide__logo">
                                <img src="/images/assort-brands/bars.png" alt="" srcset="/images/assort-brands/bars@2x.png 2x" class="assort-batteries-section__brand-slide__logo-img">
                            </div>
                            <span class="assort-batteries-section__brand-slide__company">Bars</span>
                        </a>
                        <a href="" class="assort-batteries-section__brand-slide swiper-slide">
                            <div class="assort-batteries-section__brand-slide__logo">
                                <img src="/images/assort-brands/topla.png" alt="" srcset="/images/assort-brands/topla@2x.png 2x" class="assort-batteries-section__brand-slide__logo-img">
                            </div>
                            <span class="assort-batteries-section__brand-slide__company">Topla</span>
                        </a>
                        <a href="" class="assort-batteries-section__brand-slide swiper-slide">
                            <div class="assort-batteries-section__brand-slide__logo">
                                <img src="/images/assort-brands/thumen.png" alt="" srcset="/images/assort-brands/thumen@2x.png 2x" class="assort-batteries-section__brand-slide__logo-img">
                            </div>
                            <span class="assort-batteries-section__brand-slide__company">Тюмень</span>
                        </a>
                        <a href="" class="assort-batteries-section__brand-slide swiper-slide">
                            <div class="assort-batteries-section__brand-slide__logo">
                                <img src="/images/assort-brands/varta.png" alt="" srcset="/images/assort-brands/varta@2x.png 2x" class="assort-batteries-section__brand-slide__logo-img">
                            </div>
                            <span class="assort-batteries-section__brand-slide__company">Varta</span>
                        </a>
                        <a href="" class="assort-batteries-section__brand-slide swiper-slide">
                            <div class="assort-batteries-section__brand-slide__logo">
                                <img src="/images/assort-brands/akom.png" alt="" srcset="/images/assort-brands/akom@2x.png 2x" class="assort-batteries-section__brand-slide__logo-img">
                            </div>
                            <span class="assort-batteries-section__brand-slide__company">Аком</span>
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="assort-batteries-section__brands-list" style="--rows-count-mobile: 12;--rows-count-desktop: 7" x-data="{ shown: false }" :class="{ shown }">
                {% for item in ["Ac/dc", "Afa", "Aktex", "American", "Atlant", "Atlas", "Autopower", "Banner", "Bars", "Berga", "Black horse", "Bolk", "Bosch", "Brest battery", "Cene", "Contact", "Daf", "Delta", "Dominator", "E-lab", "E-nex", "Ecostart", "Eurostart", "Exclusive", "ExidE", "Fire ball", "Flagman", "Ford", "Ginnes", "Giver", "Gm", "Hankook", "Joker", "Kainar"] %}
                    <a href="" class="assort-batteries-section__brands-list__item">{{ item }}</a>
                {% endfor %}
                <button class="assort-batteries-section__brands-list__btn" @click.prevent="shown = true">Смотреть все</button>
            </div>
        </div>
    </div>
</section>