{% comment %}
  Renders a popup-newsletter-v3

  Accepts:
  - heading: {String} Heading of the popup-newsletter
  - sub_heading: {String} Subheading of the popup-newsletter (Optional)
  - description: {String} Description of the popup-newsletter (Optional)
  - placeholder: {String} Placeholder for the input signup form (Optional)
  - button_label: {String} Label for the button

  Usage:
  {% render 'popup-newsletter-v3',
    heading: 'SIGNUP FOR EMAILS',
    sub_heading: 'Get 20% discount shipped to your inbox',
    description: 'Subscribe to our newsletter and we will ship <strong>20% discount code</strong> today',
    placeholder: 'Enter Your Email ...',
    button_label: 'Subscribe',
   %}
{% endcomment %}

{% assign heading = heading | default: settings.popup_newsletter_heading %}
{% assign sub_heading = sub_heading | default: settings.popup_newsletter_sub_heading %}
{% assign desc_popup = desc_popup | default: settings.popup_newsletter_desc %}
{% assign placeholder = placeholder | default: settings.popup_newsletter_place_holder %}
{% assign button_label = button_label | default: settings.popup_newsletter_btn_label %}

<div class='popup-newsletter-v3'>
  <div class='popup-newsletter-v3__container'>
    <div class='popup-newsletter-v3__close'>
      <xo-modal-trigger class='xo-modal-content-style1__close{% if close_class %} {{ close_class }}{% endif %}'>
        {% render 'icon', name: 'close2', icon_size: '15' %}
      </xo-modal-trigger>
    </div>
    <xo-grid style='--xs: 1; --sm: 1; --xl: 1'>
      <div class='popup-newsletter-v3__content'>
        {%- if heading != blank -%}
          <h3 class='popup-newsletter-v3__heading'>{{ heading }}</h3>
        {%- endif -%}
        {%- if sub_heading != blank -%}
          <h1 class='popup-newsletter-v3__sub'>{{ sub_heading }}</h1>
        {%- endif -%}
        {%- if desc_popup != blank -%}
          <div class='popup-newsletter-v3__desc'>
            {{ desc_popup }}
          </div>
        {%- endif -%}

        <div class='popup-newsletter-v3__signup'>
          {%- form 'customer', id: 'ContactFooter' -%}
            <input type='hidden' name='contact[tags]' value='newsletter'>
            <div class='popup-newsletter-v3__form'>
              {% 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: 'Enter your email...', attr: attr %}
              {% render 'button', type: 'submit', text: {{button_label}},  style: 'secondary', size: 'md', radius: 0, padding: 3, background_color: '#bc9e6b', text_color: '#fff' %}
            </div>
            {%- if form.errors -%}
              <small id='ContactFooter-error' class='newsletter-form__message newsletter-form__message--error'>
                {%- render 'icon', name: 'error' -%}
                {{- form.errors.translated_fields.email | capitalize }}
                {{ form.errors.messages.email -}}
              </small>
            {%- endif -%}
            {%- if form.posted_successfully? -%}
              <div
                class='newsletter-form__message newsletter-form__message--success'
                id='ContactFooter-success'
                tabindex='-1'
                autofocus
              >
                {% render 'icon', name: 'success' -%}
                {{- 'newsletter.success' | t }}
              </div>
            {%- endif -%}
          {%- endform -%}
        </div>
        <xo-modal-trigger>
          <div class='popup-newsletter-v3__no'>no, thanks.</div>
        </xo-modal-trigger>
      </div>
    </xo-grid>
  </div>
</div>
