<section
    class="email-subscribe-section"
    x-data="formValidation({
        fields: { email: ['required', 'email'] },
        extra: { subscribed: false },
        onSuccess() { this.subscribed = true },
    })"
>
    <div class="email-subscribe-section__content">
        <img src="/images/email-icon.png" alt="" srcset="/images/email-icon@2x.png 2x" class="email-subscribe-section__icon">
        <div class="email-subscribe-section__main">
            <b>Подпишитесь на нашу рассылку</b>
            <p>Получайте свежие акции и советы по уходу за АКБ</p>
        </div>
    </div>
    <form class="email-subscribe-section__form" @submit.prevent="onSubmit">
        <div class="input-wrapper input-wrapper--primary">
            <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>
        <button type="submit" class="email-subscribe-section__form__submit-btn">Подписаться</button>
    </form>
    <div class="email-subscribe-section__success" x-show="subscribed">
        <svg class="email-subscribe-section__success__icon"><use xlink:href="/sprite.svg#circle-check-2"></use></svg>
        <div class="email-subscribe-section__success__main">
            <span class="email-subscribe-section__success__title">Спасибо за подписку!</span>
            <p class="email-subscribe-section__success__desc">Мы отправили письмо с подтверждением на указанный email</p>
        </div>
    </div>
</section>