<div class="modal-default write-review-modal">
    <button class="modal-default__close-btn" data-modal-close>
        <svg><use xlink:href="/sprite.svg#close"></use></svg>
    </button>
    <div class="write-review-modal__content">
        <span class="modal-default-title">Запросить скидку</span>
        <p class="modal-default-desc">Укажите ссылку на магазин, где вы нашли товар дешевле и мы сделаем скидку на разницу в стоимости</p>
        <div class="write-review-modal__product">
            <div class="write-review-modal__product__cover">
                <img src="/images/products/p-1.png" alt="" srcset="/images/products/p-1@2x.png 2x">
            </div>
            <p class="write-review-modal__product__name">Delkor 75D23L 65Ач 550А, ОП, стандартные клеммы</p>
            <span class="write-review-modal__product__price">6 400 ₽</span>
        </div>
        <form
            action=""
            class="write-review-modal__form"
            x-data="formValidation({ fields: { link: ['required', 'url'], email: ['required', 'email'], terms: ['accepted'] } })"
            @submit.prevent="onSubmit"
            x-init="fields.link = 'https://carakb.ru/akkumulyatory/legkovye-avtomobili'"
        >
            <div class="write-review-modal__form__grid">
                <div class="input-wrapper write-review-modal__form__fill">
                    <input type="text" placeholder="" class="input-default" x-model.trim="fields.link" @input="validateField('link')" @blur="touchAndValidate('link')">
                    <span class="input-placeholder">Ссылка</span>
                    <svg class="input-ntf input-ntf--error" data-input-ntf-message="Поле обязательно для заполнения или ссылка введена в неверном формате" data-input-ntf-role="error" x-show="touched.link && !!errors.link"><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.link && hadError.link && !errors.link"><use xlink:href="/sprite.svg#input-success"></use></svg>
                </div>
                <div class="input-wrapper write-review-modal__form__fill">
                    <input type="text" placeholder="" class="input-default" x-model.trim="fields.email" @input="validateField('email')" @blur="touchAndValidate('email')">
                    <span class="input-placeholder">Ваш e-mail</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="modal-default-submit-btn write-review-modal__form__submit-btn">Сообщить о поступлении</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>