<section class="selection-help-section">
    <span class="selection-help-section__title">{{ selectionHelpTitle|default('Не знаете, какой аккумулятор выбрать?') }}</span>
    <p class="selection-help-section__desc">Оставьте свой номер, а наш консультант поможет выбрать подходящий вариант и подскажет, как сэкономить</p>
    <form
        action=""
        class="selection-help-section__form"
        x-data="formValidation({ fields: { name: [], phone: ['required', 'phone'], terms: ['accepted'] } })"
        @submit.prevent="onSubmit"
    >
        <div class="selection-help-section__form__group">
            <div class="input-wrapper input-wrapper--primary">
                <input type="text" placeholder="" class="input-default" x-model="fields.name">
                <span class="input-placeholder">Ваше имя</span>
            </div>
            <div class="input-wrapper input-wrapper--primary">
                <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>
            <button type="submit" class="selection-help-section__form__submit-btn">Подобрать</button>
        </div>

        <label class="input-checkbox input-checkbox--primary selection-help-section__form__checkbox" :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">Нажимая кнопку «Отправить», вы соглашаетесь с <a href="">Политикой конфиденциальности</a></p>
        </label>
    </form>
    <template data-modal-idx="3194352e-64a1-44f0-978e-d371d709ac81">
        {% include "modals/bid-sent-success.twig" %}
    </template>
</section>