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

{%- assign show = show | default: settings.popup_promotion_show_on -%}
{% assign popup_promotion_style = popup_promotion_style | default: settings.popup_promotion_style %}
{%- assign cooldown = cooldown | default: settings.popup_newsletter_cooldown -%}

{%- assign width = width | default: '80rem' -%}
{% if popup_promotion_style == 'style_1' %}
  {% assign width = '100rem' %}
{% else %}
  {% assign width = '80rem' %}
{% endif %}

<xo-modal
  id='popup-promotion__modal'
  data-show='{{show}}'
  xo-name='popup-promotion'
  xo-backdrop-color='#2d2d32cc'
  style='z-index: 100000000000000;'
>
  <div slot='popup-promotion-inner' class='popup-promotion__container' style='width: {{ width }}'>
    <div class='popup-promotion-data' style='display: none !important;'>
      <div id='popup-promotion-data__cooldown'>{{ cooldown }}</div>
    </div>
    {%- if popup_promotion_style == 'style_1' -%}
      {% render 'popup-promotion-v1' %}
    {% endif %}
  </div>
</xo-modal>

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

  ]
}
{% endschema %}
