<div class="modal-default resume-modal">
    <button class="modal-default__close-btn" data-modal-close>
        <svg><use xlink:href="/sprite.svg#close"></use></svg>
    </button>
    <div class="resume-modal__content">
        <span class="modal-default-title">Отправить резюме</span>
        <div class="resume-modal__post">
            <span>Должность</span>
            <p>Курьер по доставке аккумуляторов</p>
        </div>
        <form
            action=""
            class="resume-modal__form"
            x-data="formValidation({
                fields: { message: ['required'], phone: ['required', 'phone'], email: ['required', 'email'], name: ['required'], terms: ['accepted'] },
                extra: {
                    file: null,
                    fileName: 'Файл не выбран',
                    setFile(event) {
                        this.file = event
                        if (event.target.files.length) {
                            this.fileName = event.target.files[0].name
                        } else {
                            this.fileName = 'Файл не выбран'
                            this.file = null
                        }
                    },
                },
            })"
            @submit.prevent="onSubmit"
        >
            <div class="resume-modal__form__grid">
                <div class="input-wrapper input-wrapper--textarea resume-modal__form__textarea">
                    <textarea placeholder="Текст сообщения" class="input-textarea" x-model="fields.message" @input="validateField('message')" @blur="touchAndValidate('message')"></textarea>
                    <svg class="input-ntf input-ntf--error" data-input-ntf-message="Поле обязательно для заполнения" data-input-ntf-role="error" x-show="touched.message && !!errors.message"><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.message && hadError.message && !errors.message"><use xlink:href="/sprite.svg#input-success"></use></svg>
                </div>
                <div class="input-wrapper resume-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 resume-modal__form__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>
                <div class="input-wrapper resume-modal__form__input">
                    <input type="text" placeholder="" class="input-default" x-model.trim="fields.name" @input="validateField('name')" @blur="touchAndValidate('name')">
                    <span class="input-placeholder">Ваше имя</span>
                    <svg class="input-ntf input-ntf--error" data-input-ntf-message="Поле обязательно для заполнения" data-input-ntf-role="error" x-show="touched.name && !!errors.name"><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.name && hadError.name && !errors.name"><use xlink:href="/sprite.svg#input-success"></use></svg>
                </div>
                <div class="input-file resume-modal__form__file">
                    <label class="input-file__label">
                        <svg><use xlink:href="/sprite.svg#attach"></use></svg>
                        <span>Прикрепить файл</span>
                        <input type="file" @change="setFile">
                    </label>
                    <span class="input-file__value" x-text="file?.target?.files?.[0]?.name || fileName">Файл не выбран</span>
                </div>
                <button type="submit" class="resume-modal__form__submit-btn">Отправить резюме</button>
            </div>
            <label class="input-checkbox resume-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>