{{ 'component-newsletter.css' | asset_url | stylesheet_tag }}
{{ 'newsletter-section.css' | asset_url | stylesheet_tag }}
{{ 'base.css' | asset_url | stylesheet_tag }}
{{ 'section-email-signup-banner.css' | asset_url | stylesheet_tag }}

{%- style -%}
  #Banner-{{ section.id }}::after {
    opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
  }

  {%- if section.settings.image_height == 'adapt-image' and section.settings.image != blank -%}
    @media screen and (max-width: 749px) {
      #Banner-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
        padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
        content: '';
        display: block;
      }
    }

    #Banner-{{ section.id }}::before,
    #Banner-{{ section.id }} .banner__media::before {
      padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
      content: '';
      display: block;
    }
  {%- endif -%}
{%- endstyle -%}

<xo-animate
  xo-cascade
  id='Banner-{{ section.id }}'
  class='email-signup-banner banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ section.settings.image_height }}{% if section.settings.image_height == 'adapt-image' and section.settings.image != blank %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}'
>
  {%- if section.settings.show_background_image -%}
    <div class='banner__media{% if section.settings.image != blank %} media{% endif %}'>
      {%- if section.settings.image != blank -%}
        <img
          srcset='
            {%- if section.settings.image.width >= 375 -%}{{ section.settings.image | image_url: width: 375 }} 375w,{%- endif -%}
            {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | image_url: width: 750 }} 750w,{%- endif -%}
            {%- if section.settings.image.width >= 1100 -%}{{ section.settings.image | image_url: width: 1100 }} 1100w,{%- endif -%}
            {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | image_url: width: 1500 }} 1500w,{%- endif -%}
            {%- if section.settings.image.width >= 1780 -%}{{ section.settings.image | image_url: width: 1780 }} 1780w,{%- endif -%}
            {%- if section.settings.image.width >= 2000 -%}{{ section.settings.image | image_url: width: 2000 }} 2000w,{%- endif -%}
            {%- if section.settings.image.width >= 3000 -%}{{ section.settings.image | image_url: width: 3000 }} 3000w,{%- endif -%}
            {%- if section.settings.image.width >= 3840 -%}{{ section.settings.image | image_url: width: 3840 }} 3840w,{%- endif -%}
            {{ section.settings.image | image_url }} {{ section.settings.image.width }}w
          '
          sizes='100vw'
          src='{{ section.settings.image | image_url: width: 1500 }}'
          loading='lazy'
          alt='{{ section.settings.image.alt | escape }}'
          width='{{ section.settings.image.width }}'
          height='{{ section.settings.image.width | divided_by: section.settings.image.aspect_ratio }}'
        >
      {%- else -%}
        {%- render 'email-signup-banner-background' -%}
        {%- render 'email-signup-banner-background-mobile' -%}
      {%- endif -%}
    </div>
  {%- endif -%}
  <div class='banner__content banner__content--{{ section.settings.desktop_content_position }} page-width'>
    <div class='email-signup-banner__box {% if settings.enable_border_radius == true %}email-signup-banner__box--radius{% endif %} banner__box newsletter newsletter__wrapper isolate{% if section.settings.show_background_image == false %} email-signup-banner__box--no-image{% endif %} content-container color-{{ section.settings.color_scheme }} gradient content-container--full-width-mobile'>
      {%- for block in section.blocks -%}
        {%- case block.type -%}
          {%- when 'heading' -%}
            <h2 class='email-signup-banner__heading {{ block.settings.heading_size }}' {{ block.shopify_attributes }}>
              {{ block.settings.heading | escape }}
            </h2>
          {%- when 'paragraph' -%}
            <div class='newsletter__subheading rte {{ block.settings.text_style }}' {{ block.shopify_attributes }}>
              {{ block.settings.text }}
            </div>
          {%- when 'email_form' -%}
            <div {{ block.shopify_attributes }}>
              {% form 'customer', class: 'newsletter-form' %}
                <input type='hidden' name='contact[tags]' value='newsletter'>
                <div class='newsletter-form__field-wrapper'>
                  <div class='field'>
                    <input
                      id='NewsletterForm--{{ section.id }}'
                      type='email'
                      name='contact[email]'
                      class='field__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', name: 'chevron-right', size: '2.4rem' %}
                    </button>
                  </div>
                  {%- if form.errors -%}
                    <small class='newsletter-form__message form__message' id='Newsletter-error--{{ section.id }}'>
                      {% render 'icon', name: 'error', size: '1.3rem' -%}
                      {{- form.errors.translated_fields.email | capitalize }}
                      {{ form.errors.messages.email -}}
                    </small>
                  {%- endif -%}
                </div>
                {%- if form.posted_successfully? -%}
                  <h3
                    class='newsletter-form__message newsletter-form__message--success form__message'
                    id='Newsletter-success--{{ section.id }}'
                    tabindex='-1'
                    autofocus
                  >
                    {% render 'icon', name: 'success', size: '1.3rem' -%}
                    {{- 'newsletter.success' | t }}
                  </h3>
                {%- endif -%}
              {% endform %}
            </div>
        {%- endcase -%}
      {%- endfor -%}
    </div>
  </div>
</xo-animate>

{% schema %}
{
  "name": "t:sections.email_signup_banner.name",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "paragraph",
      "content": "t:sections.email_signup_banner.settings.paragraph.content"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "t:sections.email_signup_banner.settings.image.label"
    },
    {
      "type": "range",
      "id": "image_overlay_opacity",
      "min": 0,
      "max": 100,
      "step": 10,
      "unit": "%",
      "label": "t:sections.email_signup_banner.settings.image_overlay_opacity.label",
      "default": 0
    },
    {
      "type": "checkbox",
      "id": "show_background_image",
      "label": "t:sections.email_signup_banner.settings.show_background_image.label",
      "default": true
    },
    {
      "type": "select",
      "id": "image_height",
      "options": [
        {
          "value": "adapt-image",
          "label": "t:sections.email_signup_banner.settings.image_height.options__1.label"
        },
        {
          "value": "small",
          "label": "t:sections.email_signup_banner.settings.image_height.options__2.label"
        },
        {
          "value": "medium",
          "label": "t:sections.email_signup_banner.settings.image_height.options__3.label"
        },
        {
          "value": "large",
          "label": "t:sections.email_signup_banner.settings.image_height.options__4.label"
        }
      ],
      "default": "medium",
      "label": "t:sections.email_signup_banner.settings.image_height.label",
      "info": "t:sections.email_signup_banner.settings.image_height.info"
    },
    {
      "type": "select",
      "id": "desktop_content_position",
      "options": [
        {
          "value": "top-left",
          "label": "t:sections.email_signup_banner.settings.desktop_content_position.options__1.label"
        },
        {
          "value": "top-center",
          "label": "t:sections.email_signup_banner.settings.desktop_content_position.options__2.label"
        },
        {
          "value": "top-right",
          "label": "t:sections.email_signup_banner.settings.desktop_content_position.options__3.label"
        },
        {
          "value": "middle-left",
          "label": "t:sections.email_signup_banner.settings.desktop_content_position.options__4.label"
        },
        {
          "value": "middle-center",
          "label": "t:sections.email_signup_banner.settings.desktop_content_position.options__5.label"
        },
        {
          "value": "middle-right",
          "label": "t:sections.email_signup_banner.settings.desktop_content_position.options__6.label"
        },
        {
          "value": "bottom-left",
          "label": "t:sections.email_signup_banner.settings.desktop_content_position.options__7.label"
        },
        {
          "value": "bottom-center",
          "label": "t:sections.email_signup_banner.settings.desktop_content_position.options__8.label"
        },
        {
          "value": "bottom-right",
          "label": "t:sections.email_signup_banner.settings.desktop_content_position.options__9.label"
        }
      ],
      "default": "middle-center",
      "label": "t:sections.email_signup_banner.settings.desktop_content_position.label"
    },
    {
      "type": "checkbox",
      "id": "show_text_box",
      "default": true,
      "label": "t:sections.email_signup_banner.settings.show_text_box.label"
    },
    {
      "type": "select",
      "id": "desktop_content_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.email_signup_banner.settings.desktop_content_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.email_signup_banner.settings.desktop_content_alignment.options__2.label"
        },
        {
          "value": "right",
          "label": "t:sections.email_signup_banner.settings.desktop_content_alignment.options__3.label"
        }
      ],
      "default": "center",
      "label": "t:sections.email_signup_banner.settings.desktop_content_alignment.label"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.email_signup_banner.settings.color_scheme.label",
      "default": "scheme-1"
    },
    {
      "type": "header",
      "content": "t:sections.email_signup_banner.settings.mobile_layout.content"
    },
    {
      "type": "select",
      "id": "mobile_content_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.email_signup_banner.settings.mobile_content_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.email_signup_banner.settings.mobile_content_alignment.options__2.label"
        },
        {
          "value": "right",
          "label": "t:sections.email_signup_banner.settings.mobile_content_alignment.options__3.label"
        }
      ],
      "default": "center",
      "label": "t:sections.email_signup_banner.settings.mobile_content_alignment.label"
    },
    {
      "type": "checkbox",
      "id": "show_text_below",
      "default": true,
      "label": "t:sections.email_signup_banner.settings.show_text_below.label"
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "t:sections.email_signup_banner.blocks.name_1",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Opening soon",
          "label": "t:sections.email_signup_banner.blocks.settings.heading.label"
        },
        {
          "type": "select",
          "id": "heading_size",
          "options": [
            {
              "value": "h3",
              "label": "t:sections.email_signup_banner.blocks.settings.heading_size.options__1.label"
            },
            {
              "value": "h2",
              "label": "t:sections.email_signup_banner.blocks.settings.heading_size.options__2.label"
            },
            {
              "value": "h1",
              "label": "t:sections.email_signup_banner.blocks.settings.heading_size.options__3.label"
            }
          ],
          "default": "h2",
          "label": "t:sections.email_signup_banner.blocks.settings.heading_size.label"
        }
      ]
    },
    {
      "type": "paragraph",
      "name": "t:sections.email_signup_banner.blocks.name_2",
      "limit": 1,
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "default": "<p>Be the first to know when we launch.</p>",
          "label": "t:sections.email_signup_banner.blocks.settings.paragraph.label"
        },
        {
          "type": "select",
          "id": "text_style",
          "options": [
            {
              "value": "body",
              "label": "t:sections.email_signup_banner.blocks.settings.text_style.options__1.label"
            },
            {
              "value": "subtitle",
              "label": "t:sections.email_signup_banner.blocks.settings.text_style.options__2.label"
            }
          ],
          "default": "body",
          "label": "t:sections.email_signup_banner.blocks.settings.text_style.label"
        }
      ]
    },
    {
      "type": "email_form",
      "name": "t:sections.email_signup_banner.blocks.name_3",
      "limit": 1
    }
  ]
}
{% endschema %}
