{% comment %}
  Renders a popup-promotion-v1

  Accepts:
  - color_text: {String} Color code for the popup-promotion (Optional)
  - heading: {String} Heading of the popup-promotion
  - sub_heading: {String} Subheading of the popup-promotion (Optional)
  - gift_code: {String} gift code for the popup-promotion
  - description: {String} Description of the popup-promotion (Optional)
  - button_label: {String} Label for the button
  - img_src: {String} Background image for the popup-promotion

  Usage:
  {% render 'popup-promotion-v1'%}
{% endcomment %}

{% assign color_text = color_text | default: settings.popup_promotion_color_text %}
{% assign heading = heading | default: settings.popup_promotion_heading %}
{% assign sub_heading = sub_heading | default: settings.popup_promotion_sub_heading %}
{% assign gift_code = gift_code | default: settings.popup_promotion_gift_code %}
{% assign desc_popup = desc_popup | default: settings.popup_promotion_desc %}
{% assign button_label = button_label | default: settings.popup_promotion_btn_label %}
{% assign img_src = img_src | default: settings.popup_promotion_image %}
{% assign link_button = link_button | default: settings.popup_promotion_url_button %}
{% assign media_aspect_ratio = settings.product_card_aspect_ratio %}

<div class='popup-promotion-v1 xo-scrollbar' style='--width: 0.4rem; color: {{ color_text }} !important '>
  <xo-grid class='popup-promotion-v1__grid' style='--xs: 1; --md: 2;  --xo-grid-col-gap: 0'>
    <div class='popup-promotion-v1__left'>
      <div class='popup-promotion-v1__recommend'>Recommended Products</div>
      {% if settings.popup_promotion_collection.products %}
        <div class='xo-scrollbar' style='max-width: 100%; max-height: 41.5rem;'>
          {% for product in settings.popup_promotion_collection.products limit: 10 %}
            {% assign featured_media = product.selected_or_first_available_variant.featured_media %}
            <xo-product xo-product-id='{{ product.id }}' xo-section-id='{{section.id}}'>
              <div class='popup-promotion-v1-box'>
                <div class='popup-promotion-v1-box__product'>
                  <div xo-binding='img'>
                    <a href='{{ product.url }}'>
                      {% render 'product-image', product: product, show_secondary_image: true, media_aspect_ratio: media_aspect_ratio %}
                    </a>
                  </div>
                  <xo-product-liquid-static>
                    <script type='application/json'>
                      {
                        {% for variant in product.variants
                        %}
                          {{ variant.id}}: {
                            price: `{% render 'price', variant: variant, reverse: false %}`,
                            img: `<a href='{{ product.url }}'>{% render 'product-image',product: product, variant: variant, show_secondary_image: true, media_aspect_ratio: media_aspect_ratio %}</a>`
                          },
                        {% endfor %}
                      }
                    </script>
                  </xo-product-liquid-static>
                </div>
                <div class='popup-promotion-v1-box-text'>
                  <a class='popup-promotion-v1-box-text__name' href='{{ product.url }}'>
                    {{ product.title | escape }}
                  </a>
                  <div class='xo-product-card__price'>
                    <div class='xo-product-card__price-inner' xo-binding='price'>
                      {% render 'price', product: product, use_variant: true, reverse: false %}
                    </div>
                  </div>
                  {% if product.variants.size > 1 %}
                    {% for option in product.options_with_values %}
                      {% if option.name == 'Color' %}
                        <div class='popup-promotion-v1__variants'>
                          {% render 'product-variant', option: option, style: 'color', product: product %}
                        </div>
                        {% break %}
                      {% endif %}
                    {% endfor %}
                  {% endif %}
                </div>
              </div>
              {% render 'product-data', product: product %}
            </xo-product>
          {% endfor %}
        </div>
      {% else %}
        <div class='popup-promotion-v1__empty-product'>There's no product available! Please choose a product collection.</div>
      {% endif %}
    </div>

    <div class='popup-promotion-v1__right' style='color: {{ color_text }} !important '>
      <div class='popup-promotion-v1__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>
      <div class='popup-promotion-v1__background'>
        {%- render 'image', image: {{img_src}} -%}
      </div>
      <div class='popup-promotion-v1__content'>
        {%- if heading -%}
          <div class='popup-promotion-v1__heading'>
            {{ heading }}
          </div>
        {%- endif -%}
        {%- if sub_heading -%}
          <div class='popup-promotion-v1__sub_heading'>
            {{ sub_heading }}
          </div>
        {%- endif -%}
        {%- if gift_code -%}
          <div class='popup-promotion-v1__copy'>
            {% render 'share-style2', copy_title: 'title', url: {{gift_code}} %}
          </div>
        {%- endif -%}
        {%- if desc_popup -%}
          <div class='popup-promotion-v1_desc'>
            {{ desc_popup }}
          </div>
        {%- endif -%}

        {% render 'button',link: link_button, text: {{button_label}}, style: 'secondary', mode:'dark', size: 'md', padding: 3, background_color: '#bc9e6b', text_color: '#fff' %}
      </div>
    </div>
  </xo-grid>
</div>
