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

{% block main %}
    {% include "components/bread-crumbs.twig" %}

    <section class="faq-section" x-data="{ tabActive: 'Полезные советы' }">
        <h1 class="faq-section__title">Вопрос-ответ</h1>
        
        <div class="faq-section__tags-slider" data-faq-tags-slider>
            <div class="swiper-slider">
                <div class="swiper-wrapper">
                    {% for item in ["Полезные советы", "АКБ для легковых", "Обслуживание", "Выбор АКБ", "АКБ для иномарок", "Зарядное устройство"] %}
                        <button class="swiper-slide faq-section__tag-slide" :class="{ active: tabActive === $el.innerText }" @click.prevent="tabActive = $el.innerText">{{ item }}</button>
                    {% endfor %}
                </div>
            </div>
        </div>

        {% for item in ["Полезные советы", "АКБ для легковых", "Обслуживание", "Выбор АКБ", "АКБ для иномарок", "Зарядное устройство"] %}
            <div class="faq-section__grid" x-show="tabActive === '{{ item }}'">
                <div class="faq-section__item" x-data="{ show: false }" :class="{ show }" @click.outside="show = false">
                    <div class="faq-section__item__head" @click.prevent="show = !show">
                        <b>Как не ошибиться при выборе аккумулятора? (TAB: {{ item }})</b>
                        <svg><use xlink:href="/sprite.svg#angle-bottom"></use></svg>
                    </div>
                    <p class="faq-section__item__text" x-show="show">Важно определить тип аккумулятора, который вам подходит (обратите внимание на самый популярный – обслуживаемый частично). Узнайте размер аккумулятора конкретно для вашей машины, исходя из страны производства.</p>
                </div>
                <div class="faq-section__item" x-data="{ show: false }" :class="{ show }" @click.outside="show = false">
                    <div class="faq-section__item__head" @click.prevent="show = !show">
                        <b>Какой аккумулятор устанавливается на Honda CR-V 3?</b>
                        <svg><use xlink:href="/sprite.svg#angle-bottom"></use></svg>
                    </div>
                    <p class="faq-section__item__text" x-show="show">Важно определить тип аккумулятора, который вам подходит (обратите внимание на самый популярный – обслуживаемый частично). Узнайте размер аккумулятора конкретно для вашей машины, исходя из страны производства.</p>
                </div>
                <div class="faq-section__item" x-data="{ show: false }" :class="{ show }" @click.outside="show = false">
                    <div class="faq-section__item__head" @click.prevent="show = !show">
                        <b>Какой аккумулятор устанавливается на Хонда Цивик?</b>
                        <svg><use xlink:href="/sprite.svg#angle-bottom"></use></svg>
                    </div>
                    <p class="faq-section__item__text" x-show="show">Важно определить тип аккумулятора, который вам подходит (обратите внимание на самый популярный – обслуживаемый частично). Узнайте размер аккумулятора конкретно для вашей машины, исходя из страны производства.</p>
                </div>
                <div class="faq-section__item" x-data="{ show: false }" :class="{ show }" @click.outside="show = false">
                    <div class="faq-section__item__head" @click.prevent="show = !show">
                        <b>Какой аккумулятор устанавливается на Хонда Аккорд 9?</b>
                        <svg><use xlink:href="/sprite.svg#angle-bottom"></use></svg>
                    </div>
                    <p class="faq-section__item__text" x-show="show">Важно определить тип аккумулятора, который вам подходит (обратите внимание на самый популярный – обслуживаемый частично). Узнайте размер аккумулятора конкретно для вашей машины, исходя из страны производства.</p>
                </div>
                <div class="faq-section__item" x-data="{ show: false }" :class="{ show }" @click.outside="show = false">
                    <div class="faq-section__item__head" @click.prevent="show = !show">
                        <b>Какой аккумулятор устанавливается на Хонда Аккорд 8?</b>
                        <svg><use xlink:href="/sprite.svg#angle-bottom"></use></svg>
                    </div>
                    <p class="faq-section__item__text" x-show="show">Важно определить тип аккумулятора, который вам подходит (обратите внимание на самый популярный – обслуживаемый частично). Узнайте размер аккумулятора конкретно для вашей машины, исходя из страны производства.</p>
                </div>
                <div class="faq-section__item" x-data="{ show: false }" :class="{ show }" @click.outside="show = false">
                    <div class="faq-section__item__head" @click.prevent="show = !show">
                        <b>Как не ошибиться при выборе аккумулятора?</b>
                        <svg><use xlink:href="/sprite.svg#angle-bottom"></use></svg>
                    </div>
                    <p class="faq-section__item__text" x-show="show">Важно определить тип аккумулятора, который вам подходит (обратите внимание на самый популярный – обслуживаемый частично). Узнайте размер аккумулятора конкретно для вашей машины, исходя из страны производства.</p>
                </div>
            </div>
        {% endfor %}
    </section>

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