<section class="author-company-section">
    <div class="author-company-section__content">
        <div class="author-company-section__user">
            <img src="/images/author-avatar.png" alt="" srcset="/images/author-avatar@2x.png 2x" class="author-company-section__user__avatar">
            <div class="author-company-section__user__main">
                <span class="author-company-section__user__name">Иван Иванов</span>
                <span class="author-company-section__user__desc">Автоэлектрик, диагност</span>
                <p class="author-company-section__user__text">Разбираюсь в том, как автомобиль дышит электричеством. Пишу статьи, которые помогают автовладельцам понять, что происходит с аккумулятором и как продлить ему жизнь без лишней техно-магии</p>
                <ul class="author-company-section__user__labels">
                    <li>10 лет опыта</li>
                    <li>24 публикации</li>
                </ul>
            </div>
        </div>
        <div class="author-company-section__user-desc">
            <span class="author-company-section__user-desc__title">Об авторе</span>
            <p class="author-company-section__user-desc__desc">Окончил Московский политехнический университет по направлению «Автомобильная техника». Специализируется на электрооборудовании и системах питания современных автомобилей, в том числе на диагностике и обслуживании аккумуляторных батарей</p>
            <div class="author-company-section__user-desc__separator"></div>
            <ul class="author-company-section__user-desc__list">
                <li>
                    <b>Более 12 лет опыта в автоэлектрике</b>
                    <p>Работал с легковыми и коммерческими автомобилями, от массовых моделей до премиальных брендов</p>
                </li>
                <li>
                    <b>Опыт работы в официальных сервисах</b>
                    <p>Прошёл путь от автоэлектрика до технического консультанта в дилерских центрах Volkswagen и Toyota</p>
                </li>
                <li>
                    <b>Автор технических материалов</b>
                    <p>Пишет статьи о диагностике, обслуживании и продлении срока службы аккумуляторов простым и понятным языком</p>
                </li>
            </ul>
        </div>
    </div>

    <div class="author-company-section__aside">
        <div class="author-company-section__block">
            <span class="author-company-section__block__title">Другие авторы</span>
            {% for item in range(1, 3) %}
                <a href="" class="author-company-section__block__user">
                    <img src="/images/avatar.png" alt="" class="author-company-section__block__user-avatar">
                    <div class="author-company-section__block__user-main">
                        <span class="author-company-section__block__user-name">Иван Иванов</span>
                        <span class="author-company-section__block__user-desc">24 публикации</span>
                    </div>
                </a>
            {% endfor %}
        </div>

        <div class="author-company-section__subscribe-block">
            <div class="author-company-section__subscribe-block__head">
                <div class="author-company-section__subscribe-block__head__main">
                    <span class="author-company-section__subscribe-block__head__title">Подписка на рассылку</span>
                    <p class="author-company-section__subscribe-block__head__desc">Получайте свежие акции и советы по уходу за АКБ</p>
                </div>
                <img src="/images/email-icon.png" alt="" srcset="/images/email-icon@2x.png 2x" class="author-company-section__subscribe-block__head__icon">
            </div>
            <form
                action=""
                class="author-company-section__subscribe-block__form"
                x-data="formValidation({ fields: { email: ['required', 'email'] } })"
                @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="author-company-section__subscribe-block__form__submit-btn">Подписаться</button>
            </form>
        </div>
    </div>
</section>