<div class="modal-default feedback-modal">
    <button class="modal-default__close-btn" data-modal-close>
        <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>