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

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

    <section class="blog-posts-section" x-data="{ tabActive: 1 }">
        <h1 class="blog-posts-section-title">Новости и статьи</h1>

        <div class="blog-posts-section__menu" data-blog-posts-menu-slider>
            <div class="swiper-slider">
                <div class="swiper-wrapper">
                    {% for item in ["Полезные советы", "АКБ для легковых", "Обслуживание", "Выбор АКБ", "АКБ для иномарок", "Зарядное устройство"] %}
                        <a 
                            href="" 
                            class="swiper-slide blog-posts-section__menu__link" 
                            :class="{ active: tabActive === {{ loop.index }} }" 
                            @click.prevent="tabActive = {{ loop.index }}"
                        >
                            {{ item }}
                        </a>
                    {% endfor %}
                </div>
            </div>
        </div>

        <input type="text" placeholder="Поиск по статьям" name="search" class="blog-posts-section__search-input">

        <div class="blog-posts-section__wrapper">
            <div class="blog-posts-section__list-wrapper">
                <div class="blog-posts-section__list">
                    <a href="" class="blog-posts-section__item">
                        <img src="/images/articles/1.png" alt="" class="blog-posts-section__item-cover">
                        <div class="blog-posts-section__item-main">
                            <h3 class="blog-posts-section__item-title">Как правильно заряжать автомобильный аккумулятор</h3>
                            <span class="blog-posts-section__item-desc">10 августа 2025</span>
                        </div>
                    </a>
                    <a href="" class="blog-posts-section__item">
                        <img src="/images/articles/2.png" alt="" class="blog-posts-section__item-cover">
                        <div class="blog-posts-section__item-main">
                            <h3 class="blog-posts-section__item-title">Зарядные устройства для автомобильных аккумуляторов</h3>
                            <span class="blog-posts-section__item-desc">10 августа 2025</span>
                        </div>
                    </a>
                    <a href="" class="blog-posts-section__item">
                        <img src="/images/articles/3.png" alt="" class="blog-posts-section__item-cover">
                        <div class="blog-posts-section__item-main">
                            <h3 class="blog-posts-section__item-title">Какой аккумулятор устанавливается на Ауди А6 С5</h3>
                            <span class="blog-posts-section__item-desc">10 августа 2025</span>
                        </div>
                    </a>
                    <div class="blog-posts-section__popular">
                        <span class="blog-posts-section__popular-title">Популярные статьи</span>
                        {% for item in range(1, 3) %}
                            <div class="blog-posts-section__popular-item">
                                <a href="" class="blog-posts-section__popular-item__title">Как правильно заряжать автомобильный аккумулятор</a>
                                <span class="blog-posts-section__popular-item__date">10 августа 2025</span>
                                <div class="blog-posts-section__popular-item__stat">
                                    <div class="blog-posts-section__popular-item__stat-item">
                                        <svg><use xlink:href="/sprite.svg#eye"></use></svg>
                                        <span>123</span>
                                    </div>
                                    <div class="blog-posts-section__popular-item__stat-item">
                                        <svg><use xlink:href="/sprite.svg#clock"></use></svg>
                                        <span>5 мин</span>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                    <a href="" class="blog-posts-section__item">
                        <img src="/images/articles/1.png" alt="" class="blog-posts-section__item-cover">
                        <div class="blog-posts-section__item-main">
                            <h3 class="blog-posts-section__item-title">Как правильно заряжать автомобильный аккумулятор</h3>
                            <span class="blog-posts-section__item-desc">10 августа 2025</span>
                        </div>
                    </a>
                    <a href="" class="blog-posts-section__item">
                        <img src="/images/articles/2.png" alt="" class="blog-posts-section__item-cover">
                        <div class="blog-posts-section__item-main">
                            <h3 class="blog-posts-section__item-title">Зарядные устройства для автомобильных аккумуляторов</h3>
                            <span class="blog-posts-section__item-desc">10 августа 2025</span>
                        </div>
                    </a>
                    <a href="" class="blog-posts-section__item">
                        <img src="/images/articles/3.png" alt="" class="blog-posts-section__item-cover">
                        <div class="blog-posts-section__item-main">
                            <h3 class="blog-posts-section__item-title">Какой аккумулятор устанавливается на Ауди А6 С5</h3>
                            <span class="blog-posts-section__item-desc">10 августа 2025</span>
                        </div>
                    </a>
                    <a href="" class="blog-posts-section__item">
                        <img src="/images/articles/1.png" alt="" class="blog-posts-section__item-cover">
                        <div class="blog-posts-section__item-main">
                            <h3 class="blog-posts-section__item-title">Как правильно заряжать автомобильный аккумулятор</h3>
                            <span class="blog-posts-section__item-desc">10 августа 2025</span>
                        </div>
                    </a>
                    <a href="" class="blog-posts-section__item">
                        <img src="/images/articles/2.png" alt="" class="blog-posts-section__item-cover">
                        <div class="blog-posts-section__item-main">
                            <h3 class="blog-posts-section__item-title">Зарядные устройства для автомобильных аккумуляторов</h3>
                            <span class="blog-posts-section__item-desc">10 августа 2025</span>
                        </div>
                    </a>
                    <a href="" class="blog-posts-section__item">
                        <img src="/images/articles/3.png" alt="" class="blog-posts-section__item-cover">
                        <div class="blog-posts-section__item-main">
                            <h3 class="blog-posts-section__item-title">Какой аккумулятор устанавливается на Ауди А6 С5</h3>
                            <span class="blog-posts-section__item-desc">10 августа 2025</span>
                        </div>
                    </a>
                </div>
                <div class="blog-posts-section__list-pagination">
                    <button class="blog-posts-section__list-pagination__load-more-btn">Показать ещё</button>
                    <div class="blog-posts-section__list-pagination__nav">
                        <a href="" class="blog-posts-section__list-pagination__nav-link blog-posts-section__list-pagination__nav-link--primary">
                            <svg><use xlink:href="/sprite.svg#angle-left"></use></svg>
                        </a>
                        <a href="" class="blog-posts-section__list-pagination__nav-link">
                            <span>1</span>
                        </a>
                        <a href="" class="blog-posts-section__list-pagination__nav-link active">
                            <span>2</span>
                        </a>
                        <a href="" class="blog-posts-section__list-pagination__nav-link">
                            <span>3</span>
                        </a>
                        <a href="" class="blog-posts-section__list-pagination__nav-link">
                            <span>...</span>
                        </a>
                        <a href="" class="blog-posts-section__list-pagination__nav-link">
                            <span>10</span>
                        </a>
                        <a href="" class="blog-posts-section__list-pagination__nav-link blog-posts-section__list-pagination__nav-link--primary">
                            <svg><use xlink:href="/sprite.svg#angle-right"></use></svg>
                        </a>
                    </div>
                </div>
            </div>

            <div class="blog-posts-section__aside">
                <div class="blog-posts-section__popular">
                    <span class="blog-posts-section__popular-title">Популярные статьи</span>
                    {% for item in range(1, 3) %}
                        <div class="blog-posts-section__popular-item">
                            <a href="" class="blog-posts-section__popular-item__title">Как правильно заряжать автомобильный аккумулятор</a>
                            <span class="blog-posts-section__popular-item__date">10 августа 2025</span>
                            <div class="blog-posts-section__popular-item__stat">
                                <div class="blog-posts-section__popular-item__stat-item">
                                    <svg><use xlink:href="/sprite.svg#eye"></use></svg>
                                    <span>123</span>
                                </div>
                                <div class="blog-posts-section__popular-item__stat-item">
                                    <svg><use xlink:href="/sprite.svg#clock"></use></svg>
                                    <span>5 мин</span>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>

                <form
                    class="blog-posts-section__email-subscribe"
                    x-data="formValidation({ 
                        fields: { email: ['required', 'email'] },
                        showSuccessModal: false,
                        onSuccess: (fields) => { 
                            const el = document.querySelector('.blog-posts-section__email-subscribe__success');

                            if (el) {
                                el.classList.add('visible')
                            }
                        }
                    })"
                    @submit.prevent="onSubmit"
                >
                    <div class="blog-posts-section__email-subscribe__icon">
                        <img src="/images/email-icon.png" alt="" srcset="/images/email-icon@2x.png 2x">
                    </div>
                    <div class="blog-posts-section__email-subscribe__main">
                        <span class="blog-posts-section__email-subscribe__title">Подпишитесь на нашу рассылку</span>
                        <p class="blog-posts-section__email-subscribe__desc">Получайте свежие акции и советы по уходу за АКБ</p>
                    </div>
                    <div class="input-wrapper blog-posts-section__email-subscribe__input">
                        <input type="text" placeholder="" class="input-default" x-model.trim="fields.email" @input="validateField('email')" @blur="touchAndValidate('email')">
                        <span class="input-placeholder">Email</span>
                        <svg class="input-ntf input-ntf--error" data-input-ntf-message="Поле обязательно для заполнения или email введен в неверном формате" data-input-ntf-role="error" x-show="touched.email && !!errors.email"><use xlink:href="/sprite.svg#input-error"></use></svg>
                        <svg class="input-ntf" data-input-ntf-message="Email корректный" data-input-ntf-role="success" x-show="touched.email && hadError.email && !errors.email"><use xlink:href="/sprite.svg#input-success"></use></svg>
                    </div>
                    <button type="submit" class="blog-posts-section__email-subscribe__submit-btn">Подписаться</button>
                    <div class="blog-posts-section__email-subscribe__success">
                        <svg><use xlink:href="/sprite.svg#circle-check-2"></use></svg>
                        <b>Спасибо за подписку!</b>
                        <p>Мы отправили письмо с подтверждением на указанный email</p>
                    </div>
                </form>
            </div>
        </div>
    </section>

    {% include "components/popular-brands-akb-section.twig" %}
    {% include "components/selection-help-section.twig" %}
    {% include "components/akb-by-car-brands-section.twig" %}
    {% include "components/akb-by-type-equipment-section.twig" %}
{% endblock %}