{% trans_default_domain 'front_ec_international' %}

<div class="content">

    {{ form_start(form, {
        'attr': {
            "id": "newsletter-form-" ~ campaign.id,
            "class": campaign.recaptcha ? 'recaptcha newsletter-form' : 'newsletter-form',
            "action": path('front_newsletter_view', {"request": app.request, 'filter': campaign.slug, 'website': website.id}),
            "novalidate": "novalidate",
            'data-modal': "#" ~ modalId
        }}) }}

    {% if form['field_ho'] is defined %}
        {{ form_label(form['field_ho']) }}
        {{ form_widget(form['field_ho']) }}
    {% endif %}

    {% if form['field_ho_entitled'] is defined %}
        {{ form_label(form['field_ho_entitled']) }}
        {{ form_widget(form['field_ho_entitled']) }}
    {% endif %}

    <div class="container">

        <div class="row">

            <label class="col-lg-4 col-xl-3 col-form-label text-center text-md-center text-md-left text-uppercase form-control-label required" for="front_newsletter_email">
                <span class="label-name text-white">{{ "S'inscrire à la newsletter"|trans|raw }}</span>
            </label>

            <div class="refer-group col-lg-8 col-xl-9">

                <div class="row newsletter-fields">
                    <div class="col-md-8 p-0">{{ form_widget(form.email) }}</div>
                    <div class="btn-container col-md-4 mt-3 mt-md-0">
                        <button type="button"
                                class="newsletter-submit w-100 btn btn-outline-white btn hbtn hb-fill-right">
                            <i class="fas fa-sign-in-alt mr-2"
                               data-icon="fas fa-sign-in-alt"
                               data-spinner="fas fa-spin fa-spinner"></i>{{ "Je m'inscris"|trans|raw }}
                        </button>
                    </div>
                </div>

                {{ form_errors(form.email) }}

                {% for type, flashes in app.session.flashbag.all %}
                    {% for flash in flashes %}
                        <span class="{% if 'error' in type %}invalid{% else %}valid{% endif %}-feedback {% if campaign.thanksModal and 'error' not in type %}d-none{% else %}d-block{% endif %}">
                            <span class="mb-0 d-block">
                                <i class="fas fa-{% if 'error' in type %}warning{% else %}check{% endif %}"></i>
                                <span class="form-{% if 'error' in type %}error{% else %}success{% endif %}-message">{{ flash|raw }}</span>
                            </span>
                        </span>
                    {% endfor %}
                {% endfor %}

            </div>

            <div class="col-12" data-aos="fade-up">
                {% if intro|striptags|length > 0 %}
                    <p class="introduction text-white m-0 mt-4 text-center">{{ intro|unescape|raw|nl2br }}</p>
                {% endif %}
            </div>

        </div>
    </div>

    {% if campaign.recaptcha %}
        <div class="form-data" data-id="{{ campaign.securityKey }}" data-website="{{ websiteId() }}"></div>
    {% endif %}

    {{ form_end(form) }}

    {% if campaign.thanksModal %}
        {% include 'front/' ~ websiteTemplate ~ '/include/thanks-modal.html.twig' %}
    {% endif %}

</div>