{{ 'newsletter-section.css' | asset_url | stylesheet_tag }}

{% render 'shx-header-subtitle', title: "Bleib up-to-date!", subtitle: "Erhalte exklusive Vorteile direkt in dein Postfach!" %}

{% form 'customer', class: 'shx-newsletter-form' %}
  <input type="hidden" name="contact[tags]" value="newsletter">
  <div
    class="{% comment %}newsletter-form__field-wrapper{% endcomment %}{% if settings.animations_reveal_on_scroll %}scroll-trigger animate--slide-in{% endif %} shx-newsletter-container"
    {% comment %}
    {% if settings.animations_reveal_on_scroll %}
      data-cascade
      style="--animation-order: {{ forloop.index }};"
    {% endif %}
    {% endcomment %}
  >
    <dotlottie-player
      id="shx-newsletter-animation"
      src="{{ 'lottie_newsletter.lottie' | asset_url }}"
      background="transparent"
      speed="1"
      autoplay
      loop="true"
      direction="1"
      mode="bounce"></dotlottie-player>

    <div class="shx-newsletter-field-container">
      <h2 style="margin-top: 0">Jetzt anmelden</h2>

      <div class="field">
        <input
          id="NewsletterForm--{{ section.id }}"
          type="email"
          name="contact[email]"
          class="field__input shx-newsletter-input"
          value="{{ form.email }}"
          aria-required="true"
          autocorrect="off"
          autocapitalize="off"
          autocomplete="email"
          {% if form.errors %}
            autofocus
            aria-invalid="true"
            aria-describedby="Newsletter-error--{{ section.id }}"
          {% elsif form.posted_successfully? %}
            aria-describedby="Newsletter-success--{{ section.id }}"
          {% endif %}
          placeholder="{{ 'newsletter.label' | t }}"
          required
        >
        <label class="field__label" for="NewsletterForm--{{ section.id }}">
          {{ 'newsletter.label' | t }}
        </label>
        <button
          type="submit"
          class="newsletter-form__button field__button"
          name="commit"
          id="Subscribe"
          aria-label="{{ 'newsletter.button_label' | t }}"
        >
          {% render 'icon-arrow' %}
        </button>
      </div>
      
      {%- if form.errors -%}
        <small class="newsletter-form__message form__message" id="Newsletter-error--{{ section.id }}">
          {%- render 'icon-error' -%}
          {{- form.errors.translated_fields.email | capitalize }}
          {{ form.errors.messages.email -}}
        </small>
      {%- endif -%}
      
      {%- if form.posted_successfully? -%}
        <h3
          class="newsletter-form__message newsletter-form__message--success form__message"
          id="Newsletter-success--{{ section.id }}"
          tabindex="-1"
          autofocus
          style="margin-top: 10px"
        >
          {% render 'icon-success' -%}
          {{- 'newsletter.success' | t }}
        </h3>
      {%- endif -%}
    </div>
  </div>
{% endform %}