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

  Accepts:
  - title: {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
  - image: {String} Image for the popup-newsletter

  Usage:
  {% render 'popup-newsletter-v2',
    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_label: 'Subscribe',
    image: '{{image}}'
   %}
{% endcomment %}

{% assign title = settings.popup_newsletter_title %}
{% assign description = settings.popup_newsletter_description %}
{% assign placeholder = 'newsletter.email' | t %}
{% assign button_text = 'newsletter.button_label' | t %}
{% assign image = settings.popup_newsletter_image %}

{% assign icon_1 = settings.popup_newsletter_icon_1 %}
{% assign icon_2 = settings.popup_newsletter_icon_2 %}
{% assign icon_3 = settings.popup_newsletter_icon_3 %}
{% assign icon_4 = settings.popup_newsletter_icon_4 %}

{%- assign social_label_1 = settings.popup_newsletter_social_label_1 %}
{%- assign social_label_2 = settings.popup_newsletter_social_label_2 %}
{%- assign social_label_3 = settings.popup_newsletter_social_label_3 %}
{%- assign social_label_4 = settings.popup_newsletter_social_label_4 %}

{% assign social_url_1 = settings.popup_newsletter_social_url_1 %}
{% assign social_url_2 = settings.popup_newsletter_social_url_2 %}
{% assign social_url_3 = settings.popup_newsletter_social_url_3 %}
{% assign social_url_4 = settings.popup_newsletter_social_url_4 %}

<div class='popup-newsletter-v2'>
  <xo-grid style='--xo-grid-col-gap: 0;'>
    <div class='popup-newsletter-v2__left' style='--xs: 12; --lg: 5;'>
      <div class='popup-newsletter-v2__img'>
        {% render 'image', image: image %}
      </div>
    </div>
    <div class='popup-newsletter-v2__right' style='--xs: 12; --lg: 7;'>
      <div class='popup-newsletter-v2__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-v2__content'>
        {%- if title != blank -%}
          <h1 class='popup-newsletter-v2__title'>{{ title }}</h1>
        {%- endif -%}
        {%- if description != blank -%}
          <div class='popup-newsletter-v2__description'>
            {{ description }}
          </div>
        {%- endif -%}

        <div class='popup-newsletter-v2__signup'>
          {%- form 'customer', id: 'ContactFooter' -%}
            <input type='hidden' name='contact[tags]' value='newsletter'>
            <div class='popup-newsletter-v2__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>

        <div class='popup-newsletter-v2__social'>
          <ul role='list' class='popup-newsletter-v2__social-list'>
            <xo-tooltip xo-title='{{ social_label_1 }}'>
              <a href='{{social_url_1}}' class='popup-newsletter-v2__social-link'>
                {{ icon_1 }}
              </a>
            </xo-tooltip>

            <xo-tooltip xo-title='{{ social_label_2 }}'>
              <a href='{{social_url_2}}' class='popup-newsletter-v2__social-link'>
                {{ icon_2 }}
              </a>
            </xo-tooltip>

            <xo-tooltip xo-title='{{ social_label_3 }}'>
              <a href='{{social_url_3}}' class='popup-newsletter-v2__social-link'>
                {{ icon_3 }}
              </a>
            </xo-tooltip>

            <xo-tooltip xo-title='{{ social_label_4 }}'>
              <a href='{{social_url_4}}' class='popup-newsletter-v2__social-link'>
                {{ icon_4 }}
              </a>
            </xo-tooltip>
          </ul>
        </div>
      </div>
    </div>
  </xo-grid>
</div>
