<div class="modal-default booking-service-modal">
    <button class="modal-default__close-btn" data-modal-close>
        <svg><use xlink:href="/sprite.svg#close"></use></svg>
    </button>
    <div class="booking-service-modal__content">
        <span class="modal-default-title">Записаться на услугу</span>
        <p class="modal-default-desc">Оставьте свой номер, а наш менеджер подтвердит запись</p>
        <div class="booking-service-modal__service">
            <div class="booking-service-modal__service__cover">
                <img src="/images/modals/service.png" alt="" srcset="/images/modals/service@2x.png 2x">
            </div>
            <span class="booking-service-modal__service__name">Зарядка АКБ</span>
        </div>
        <form
            action=""
            class="modal-default-form"
            x-data="formValidation({ fields: { phone: ['required', 'phone'], name: [], terms: ['accepted'] } })"
            @submit.prevent="onSubmit"
        >
            <div class="modal-default-form__grid">
                <div class="input-wrapper modal-default-form__fill">
                    <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 modal-default-form__fill">
                    <input type="text" placeholder="" class="input-default" x-model="fields.name">
                    <span class="input-placeholder">Ваше имя (необязательно)</span>
                </div>
                <button type="submit" class="modal-default-submit-btn modal-default-form__fill">Записаться</button>
            </div>
            <label class="input-checkbox modal-default-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>