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

  Accepts:
  - subtitle: {String} subtitle of the popup-newsletter
  - title: {String} Subsubtitle of the popup-newsletter (Optional)
  - description: {String} Description of the popup-newsletter (Optional)
  - placeholder: {String} Placeholder for the input signup form (Optional)
  - button_text: {String} Label for the button

  Usage:
  {% render 'popup-newsletter-v3',
    subtitle: 'SIGNUP FOR EMAILS',
    title: '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_text: 'Subscribe',
   %}
{% endcomment %}

{% assign subtitle = settings.popup_newsletter_subtitle %}
{% assign title = settings.popup_newsletter_title %}
{% assign description = description | default: settings.popup_newsletter_description %}
{% assign placeholder = 'newsletter.email' | t %}
{% assign button_text = 'newsletter.button_label' | t %}

<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 %}' aria-label='{{ 'accessibility.close' | t }}'>
        {% render 'icon', name: 'close2', icon_size: '15' %}
      </xo-modal-trigger>
    </div>
    <div class='popup-newsletter-v3__content'>
      {%- if subtitle != blank -%}
        <div class='popup-newsletter-v3__subtitle'>{{ subtitle }}</div>
      {%- endif -%}
      {%- if title != blank -%}
        <h1 class='popup-newsletter-v3__title'>{{ title }}</h1>
      {%- endif -%}
      {%- if description != blank -%}
        <div class='popup-newsletter-v3__description'>
          {{ description }}
        </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, label: placeholder, attr: attr %}
            {% render 'button', type: 'submit', text: button_text, style: 'secondary', mode: settings.popup_newsletter_button_mode, size: 'md', padding: 3 %}
          </div>
          {% render 'newsletter-form-message', form: form %}
        {%- endform -%}
      </div>
      <xo-modal-trigger>
        <div class='popup-newsletter-v3__close-text' aria-label='{{ 'accessibility.close' | t }}'>{{ 'newsletter.ignore' | t }}</div>
      </xo-modal-trigger>
    </div>
  </div>
</div>
