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

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

<section {% render 'section-attr' %}>
  {% render 'section-bg-image' %}
  <xo-container>
    <xo-grid style='--xs:1; --md: 2; --xo-grid-col-gap: 80px' class='newsletter-v1'>
      <div class='newsletter-v1__content'>
        <xo-animate xo-cascade class='newsletter-v1__svg'>
          {% if section.settings.svg %}
            {{ section.settings.svg }}
          {% elsif section.settings.image_svg %}
            {% render 'image', image: section.settings.image_svg %}
          {% endif %}
        </xo-animate>
        <xo-animate xo-cascade class='newsletter-v1__text'>
          <h3 class='newsletter-v1__title'>
            {{ section.settings.title }}
          </h3>
          <div class='newsletter-v1__subtitle'>
            {{ section.settings.subtitle }}
          </div>
        </xo-animate>
      </div>
      <xo-animate xo-cascade class='newsletter-v1__input-wrap'>
        {%- form 'customer', id: 'ContactFooter' -%}
          <input type='hidden' name='contact[tags]' value='newsletter'>
          <div class='newsletter-v1__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 %}
            {% render 'button', text: button_text, style: 'secondary', mode: section.settings.button_mode, type: 'submit' %}
          </div>
          {% render 'newsletter-form-message', form: form %}
        {%- endform -%}
      </xo-animate>
    </xo-grid>
  </xo-container>
</section>

{% schema %}
{
  "name": "t:sections.newsletter_v1.name",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "html",
      "id": "svg",
      "label": "t:sections.newsletter_v1.settings.svg.label"
    },
    {
      "type": "image_picker",
      "id": "image_svg",
      "label": "t:sections.newsletter_v1.settings.image_svg.label"
    },
    {
      "type": "text",
      "id": "title",
      "label": "t:sections.newsletter_v1.settings.title.label",
      "info": "t:sections.newsletter_v1.settings.title.info"
    },
    {
      "type": "text",
      "id": "subtitle",
      "label": "t:sections.newsletter_v1.settings.subtitle.label",
      "info": "t:sections.newsletter_v1.settings.subtitle.info"
    },
    {
      "type": "select",
      "id": "button_mode",
      "label": "t:sections.newsletter_v1.settings.button_mode.label",
      "options": [
        {
          "value": "light",
          "label": "t:sections.newsletter_v1.settings.button_mode.option_1.label"
        },
        {
          "value": "dark",
          "label": "t:sections.newsletter_v1.settings.button_mode.option_2.label"
        },
        {
          "value": "accent",
          "label": "t:sections.newsletter_v1.settings.button_mode.option_3.label"
        }
      ],
      "default": "dark"
    },
    {
      "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_v1.presets.name"
    }
  ]
}
{% endschema %}
