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

{% assign placeholder = 'newsletter.email' | t %}

<section {% render 'section-attr' %}>
  {% render 'section-bg-image' %}
  <div class='newsletter-v7'>
    <xo-container>
      <xo-grid>
        <xo-animate xo-cascade style='--xs:12; --md: 5' class='newsletter-v7__title-wrap'>
          <div class='newsletter-v7__content'>
            <xo-animate xo-cascade class='newsletter-v7__text'>
              <h3 class='newsletter-v7__title'>
                {{ section.settings.title }}
              </h3>
              <div class='newsletter-v7__subtitle'>
                {{ section.settings.subtitle }}
              </div>
            </xo-animate>
          </div>
        </xo-animate>
        <xo-animate xo-cascade style='--xs:12; --md: 7' class='newsletter-v7__input-wrap'>
          {%- form 'customer', id: 'ContactFooter', class: 'xo-footer-block__form' -%}
            <input type='hidden' name='contact[tags]' value='newsletter'>
            <div class='newsletter-v7__input-btn'>
              {% assign value = form.email %}
              {% capture attr %}
              aria-required='true'
              autocorrect='off'
              {% if form.errors %}
                autofocus
                aria-invalid='true'
                aria-describedby='ContactFooter-error'
                {% elsif form.posted_successfully? %}
                  aria-describedby='ContactFooter-success'
              {% endif %}
              required
            {% endcapture %}
              {% render 'field-input', type: 'email', name: 'contact[email]', value: value, placeholder: placeholder, attr: attr %}
              <button type='submit' class='newsletter-v7__button'>
                <span class='newsletter-v7__icon newsletter-v7__icon--before'>{{ section.settings.svg }}</span>
                <span class='newsletter-v7__icon newsletter-v7__icon--after'>{{ section.settings.svg }}</span>
              </button>
            </div>
            {% render 'newsletter-form-message', form: form %}
          {%- endform -%}
        </xo-animate>
      </xo-grid>
    </xo-container>
  </div>
</section>

{% schema %}
{
  "name": "t:sections.newsletter_v4.name",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "t:sections.newsletter_v4.settings.title.label"
    },
    {
      "type": "text",
      "id": "subtitle",
      "label": "t:sections.newsletter_v4.settings.subtitle.label"
    },
    {
      "type": "html",
      "id": "svg",
      "label": "t:sections.newsletter_v4.settings.svg.label"
    },
    {
      "type": "header",
      "content": "t:sections.all.heading.content"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.color_scheme.label"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "t:sections.all.bg_color.label"
    },
    {
      "type": "color_background",
      "id": "background_gradient",
      "label": "t:sections.all.bg_gradient.label"
    },
    {
      "type": "image_picker",
      "id": "background_image_desktop",
      "label": "t:sections.all.background_image_desktop.label"
    },
    {
      "type": "image_picker",
      "id": "background_image_mobile",
      "label": "t:sections.all.background_image_mobile.label"
    },
    {
      "type": "checkbox",
      "id": "use_parallax",
      "label": "t:sections.all.use_parallax.label",
      "default": true
    },
    {
      "type": "number",
      "id": "padding_top",
      "label": "t:sections.all.padding_top.label",
      "default": 50
    },
    {
      "type": "number",
      "id": "padding_bottom",
      "label": "t:sections.all.padding_bottom.label",
      "default": 50
    }
  ],
  "presets": [
    {
      "name": "t:sections.newsletter_v4.presets.name"
    }
  ]
}
{% endschema %}
