<div 
    class="mobile-main-menu-popup" 
    x-data="{ 
        routeActive: null,
        onClose() {
            $refs.popup.classList.remove('visible');
            this.routeActive = null;
        }
    }" 
    x-ref="popup"
>
    <div class="mobile-main-menu-popup__header">
        <button class="mobile-main-menu-popup__header__btn" @click.prevent="onClose">
            <svg><use xlink:href="/sprite.svg#close-mobile"></use></svg>
        </button>
        <a href="" class="mobile-main-menu-popup__header__logo">
            <img src="/images/logo.svg" alt="">
        </a>
    </div>

    <div class="mobile-main-menu-popup__main">
        <div class="mobile-main-menu-popup__main-links">
            <a href="" class="mobile-main-menu-popup__main-link" @click.prevent="routeActive = $el.innerText; console.log($el.innerText)">
                <span>Аккумуляторы</span>
                <svg><use xlink:href="/sprite.svg#angle-right"></use></svg>
            </a>
            <a href="" class="mobile-main-menu-popup__main-link" @click.prevent="routeActive = $el.innerText">
                <span>Сопутствующие товары</span>
                <svg><use xlink:href="/sprite.svg#angle-right"></use></svg>
            </a>
            <a href="" class="mobile-main-menu-popup__main-link" @click.prevent="routeActive = $el.innerText">
                <span>Покупателю</span>
                <svg><use xlink:href="/sprite.svg#angle-right"></use></svg>
            </a>
            <a href="" class="mobile-main-menu-popup__main-link" @click.prevent="routeActive = $el.innerText">
                <span>О компании</span>
                <svg><use xlink:href="/sprite.svg#angle-right"></use></svg>
            </a>
            <a href="" class="mobile-main-menu-popup__main-link" @click.prevent="routeActive = $el.innerText">
                <span>Доставка и оплата</span>
                <svg><use xlink:href="/sprite.svg#angle-right"></use></svg>
            </a>
            <a href="" class="mobile-main-menu-popup__main-link" @click.prevent="routeActive = $el.innerText">
                <span>Контакты и адреса</span>
                <svg><use xlink:href="/sprite.svg#angle-right"></use></svg>
            </a>
            <div class="mobile-main-menu-popup__separator"></div>
            <a href="" class="mobile-main-menu-popup__main-link" @click.prevent="onClose" data-modal-btn="9a98c0e5-2b81-4c65-8063-09fc178dbea8">
                <svg><use xlink:href="/sprite.svg#phone-fill"></use></svg>
                <span>Заказать звонок</span>
                <svg><use xlink:href="/sprite.svg#angle-right"></use></svg>
                <template data-modal-idx="9a98c0e5-2b81-4c65-8063-09fc178dbea8">
                    <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"
                                x-data="formValidation({ fields: { phone: ['required', 'phone'], name: [], terms: ['accepted'] } })"
                                @submit.prevent="onSubmit"
                            >
                                <div class="feedback-modal__form__grid">
                                    <div class="input-wrapper feedback-modal__form__input">
                                        <input type="text" placeholder="" class="input-default" x-model="fields.phone" x-mask="+7 999 999-99-99" @input="validateField('phone')" @blur="touchAndValidate('phone')">
                                        <span class="input-placeholder">Номер телефона</span>
                                        <svg class="input-ntf input-ntf--error" data-input-ntf-message="Поле обязательно для заполнения или телефон введен в неверном формате" data-input-ntf-role="error" x-show="touched.phone && !!errors.phone"><use xlink:href="/sprite.svg#input-error"></use></svg>
                                        <svg class="input-ntf" data-input-ntf-message="Телефон корректный" data-input-ntf-role="success" x-show="touched.phone && hadError.phone && !errors.phone"><use xlink:href="/sprite.svg#input-success"></use></svg>
                                    </div>
                                    <div class="input-wrapper feedback-modal__form__input">
                                        <input type="text" placeholder="" class="input-default" x-model="fields.name">
                                        <span class="input-placeholder">Ваше имя (необязательно)</span>
                                    </div>
                                    <button type="submit" class="feedback-modal__form__submit-btn">Жду звонка</button>
                                </div>
                                <label class="input-checkbox feedback-modal__form__terms" :class="{ error: touched.terms && !!errors.terms }">
                                    <input type="checkbox" x-model="fields.terms" @change="touchAndValidate('terms')">
                                    <div class="input-checkbox__box"></div>
                                    <p class="input-checkbox__text">Нажимая кнопку «Отправить», вы соглашаетесь с Политикой конфиденциальности </p>
                                </label>
                            </form>
                        </div>
                    </div>
                </template>
            </a>
        </div>
    </div>

    <div class="mobile-main-menu-popup" x-show="routeActive === 'Аккумуляторы'">
        <div class="mobile-main-menu-popup__header mobile-main-menu-popup__header--route">
            <button class="mobile-main-menu-popup__header__btn" @click.prevent="routeActive = null">
                <svg><use xlink:href="/sprite.svg#back-mobile"></use></svg>
            </button>
            <span class="mobile-main-menu-popup__header__title">Аккумуляторы</span>
            <button class="mobile-main-menu-popup__header__btn" @click.prevent="onClose">
                <svg><use xlink:href="/sprite.svg#close-mobile"></use></svg>
            </button>
        </div>

        <div class="mobile-main-menu-popup__main">
            <div class="mobile-main-menu-popup__links">
                {% for item in ["Легковые авто", "Грузовые авто", "Мотоциклы", "Седельные тягачи", "Автобусы", "Сельхоз техника", "Строительная и дорожная техника", "Погрузчики", "Автокраны", "Экскаваторы", "Бульдозеры", "Коммунальная техника"] %}
                    <a href="" class="mobile-main-menu-popup__link">{{ item }}</a>
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="mobile-main-menu-popup" x-show="routeActive === 'Сопутствующие товары'">
        <div class="mobile-main-menu-popup__header mobile-main-menu-popup__header--route">
            <button class="mobile-main-menu-popup__header__btn" @click.prevent="routeActive = null">
                <svg><use xlink:href="/sprite.svg#back-mobile"></use></svg>
            </button>
            <span class="mobile-main-menu-popup__header__title">Сопутствующие товары</span>
            <button class="mobile-main-menu-popup__header__btn" @click.prevent="onClose">
                <svg><use xlink:href="/sprite.svg#close-mobile"></use></svg>
            </button>
        </div>

        <div class="mobile-main-menu-popup__main">
            <div class="mobile-main-menu-popup__links">
                {% for item in ["Автомобильные аксессуары", "Зарядные устройства", "Клеммы/перемычки", "Масло", "Охлаждающая жидкость", "Пуско-зарядные устройства", "Пусковые провода", "Смазка", "Тормозная жидкость"] %}
                    <a href="" class="mobile-main-menu-popup__link">{{ item }}</a>
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="mobile-main-menu-popup" x-show="routeActive === 'Покупателю'">
        <div class="mobile-main-menu-popup__header mobile-main-menu-popup__header--route">
            <button class="mobile-main-menu-popup__header__btn" @click.prevent="routeActive = null">
                <svg><use xlink:href="/sprite.svg#back-mobile"></use></svg>
            </button>
            <span class="mobile-main-menu-popup__header__title">Покупателю</span>
            <button class="mobile-main-menu-popup__header__btn" @click.prevent="onClose">
                <svg><use xlink:href="/sprite.svg#close-mobile"></use></svg>
            </button>
        </div>

        <div class="mobile-main-menu-popup__main">
            <div class="mobile-main-menu-popup__links">
                {% for item in ["Зарядка аккумулятора", "Установка аккумулятора", "Выкуп аккумуляторов", "Проверка генератора", "Узнать дату производства аккумулятора", "Акции", "Гарантия", "Доставка и оплата", "Обмен и возврат", "Полезные статьи", "Оптовым клиентам"] %}
                    <a href="" class="mobile-main-menu-popup__link">{{ item }}</a>
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="mobile-main-menu-popup" x-show="routeActive === 'О компании'">
        <div class="mobile-main-menu-popup__header mobile-main-menu-popup__header--route">
            <button class="mobile-main-menu-popup__header__btn" @click.prevent="routeActive = null">
                <svg><use xlink:href="/sprite.svg#back-mobile"></use></svg>
            </button>
            <span class="mobile-main-menu-popup__header__title">О компании</span>
            <button class="mobile-main-menu-popup__header__btn" @click.prevent="onClose">
                <svg><use xlink:href="/sprite.svg#close-mobile"></use></svg>
            </button>
        </div>

        <div class="mobile-main-menu-popup__main">
            <div class="mobile-main-menu-popup__links">
                {% for item in ["О нас", "Сертификаты и лицензии", "Новости", "Отзывы о нас"] %}
                    <a href="" class="mobile-main-menu-popup__link">{{ item }}</a>
                {% endfor %}
            </div>
        </div>
    </div>
</div>