{{ 'popup-newsletter.css' | asset_url | stylesheet_tag }}

{%- assign show = show | default: settings.popup_newsletter_show_on -%}
{% assign popup_newsletter_style = popup_newsletter_style | default: settings.popup_newsletter_style %}
{%- assign cooldown = cooldown | default: settings.popup_newsletter_cooldown -%}

{%- assign width = width | default: '80rem' -%}
{% if popup_newsletter_style == 'style_5' %}
  {% assign width = '51rem' %}
{% elsif popup_newsletter_style == 'style_6' %}
  {% assign width = '75rem' %}
{% else %}
  {% assign width = '80rem' %}
{% endif %}

<xo-modal
  id='popup-newsletter__modal'
  data-show='{{show}}'
  xo-name='popup-newsletter'
  xo-backdrop-color='#2d2d32cc'
  style='z-index: 100000000000000;'
>
  <div slot='popup-newsletter-inner' class='popup-newsletter__container' style='width: {{ width }}'>
    <div class='popup-newsletter-data' style='display: none !important;'>
      <div id='popup-newsletter-data__cooldown'>{{ cooldown }}</div>
    </div>
    {%- if popup_newsletter_style == 'style_1' -%}
      {% render 'popup-newsletter-v1' %}
    {%- elsif popup_newsletter_style == 'style_2' -%}
      {% render 'popup-newsletter-v2' %}
    {%- elsif popup_newsletter_style == 'style_3' -%}
      {% render 'popup-newsletter-v3' %}
    {%- elsif popup_newsletter_style == 'style_4' -%}
      {% render 'popup-newsletter-v4' %}
    {%- elsif popup_newsletter_style == 'style_5' -%}
      {% render 'popup-newsletter-v5' %}
    {%- elsif popup_newsletter_style == 'style_6' -%}
      {% render 'popup-newsletter-v6' %}
    {% endif %}
  </div>
</xo-modal>

{% schema %}
{
  "name": "t:sections.popup_newsletter.name",
  "class": "popup-newsletter",
  "settings": [

  ]
}
{% endschema %}
