{% comment %}
  Renders a modal.

  Accepts:
  - title: {String} Title of the modal (optional)
  - content: {String} Content of the modal (optional)
  - footer: {String} Footer of the modal (optional)
  - width: {String} Width of the modal. Default: '50rem' (optional)
  - height: {String} Height of the modal. Default: '80vh' (optional)
  - full_height: {Boolean} Whether to make the modal full height. Default: false (optional)
  - full_width: {Boolean} Whether to make the modal full width. Default: false (optional)
  - close_size: {String} Size of the close icon. Default: '2rem' (optional)
  - title_class: {String} Class name for the title (optional)
  - title_size: {String} Size of the title (optional)
  - content_class: {String} Class name for the content (optional)
  - footer_class: {String} Class name for the footer (optional)
  - close_class: {String} Class name for the close (optional)
  - animate: {Boolean} Whether to animate the modal (optional)
  - header_height: {String} Height of the header (optional)
  - scroll_disabled: {Boolean} Whether to disable scrolling on the modal (optional)
  - content_tag_name: {String} Tag name for the content (optional)
  - header_separator: {Boolean} Whether to add a separator between the header and the content (optional)
  - footer_separator: {Boolean} Whether to add a separator between the content and the footer (optional)

  Usage:
  {% render 'modal-content-style1',
    title: 'Modal',
    content: 'This is a modal.',
    footer: 'This is the footer.',
  %}
{% endcomment %}

{% liquid
  assign width = width | default: '50rem'
  assign height = height | default: '80vh'
  assign header_height = header_height | default: '5.5rem'
  assign footer_height = footer_height | default: '7rem'
  assign close_size = close_size | default: '2rem'
  assign content_tag_name = content_tag_name | default: 'div'
  assign media_aspect_ratio = settings.product_card_aspect_ratio
%}

{% capture header %}
  {% if title != blank %}
    <div class='xo-modal-content-style1__header'>
      <h2 class='xo-modal-content-style1__title{% if title_class %} {{ title_class }}{% endif %}'{% if title_size %} style="--title-size: {{ title_size }}"{% endif %}>{{ title }}</h2>
      <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>
  {% else %}
    <xo-modal-trigger class='xo-modal-content-style1__close xo-modal-content-style1__close--abs{% if close_class %} {{ close_class }}{% endif %}' aria-label='{{ 'accessibility.close' | t }}'>
      {% render 'icon', name: 'close2', icon_size: '15' %}
    </xo-modal-trigger>
  {% endif %}
{% endcapture %}

<div
  class='xo-modal-content-style1'
  style='--width: {{ width }}; --height: {{ height }}; --header-height: {{ header_height }}; --footer-height: {{ footer_height }}'
>
  <div class='xo-modal-content-style1__inner{% if full_height %} xo-modal-content-style1__inner--full-height{% endif %}{% if full_width %} xo-modal-content-style1__inner--full-width{% endif %}'>
    {% if animate %}
      <xo-animate xo-cascade xo-duration='1000'>
        {{ header }}
        {% if header_separator %}
          <div class='xo-modal-content-style1__separator'></div>
        {% endif %}
      </xo-animate>
    {% else %}
      {{ header }}
    {% endif %}
    <{{ content_tag_name }} class='xo-modal-content-style1__body{% unless scroll_disabled %} xo-scrollbar{% endunless %}'>
      <div class='xo-modal-content-style1__content{% if content_class %} {{ content_class }}{% endif %}'>
        {{ content }}
      </div>
    </{{ content_tag_name }}>
    {% if footer %}
      {% if footer_separator %}
        <div class='xo-modal-content-style1__separator'></div>
      {% endif %}
      <div class='xo-modal-content-style1__footer{% if footer_class %} {{ footer_class }}{% endif %}'>
        {% if settings.cart_drawer_collection.products %}
          <h5 class='title-collection-cart'>You may also like</h5>
          <xo-carousel
            xo-per-view='1.53'
            xo-breakpoints='
              {
                375: {
                  perView: 1.2,
                }
              }
            '
          >
            <div class='cart-carousel-btn__wrap'>
              <xo-carousel-prev class='cart-carousel-btn'>
                <button class='button-trans'>
                  {% render 'icon', name: 'arrow-left', icon_size: '12' %}
                </button>
              </xo-carousel-prev>
              <xo-carousel-next class='cart-carousel-btn'>
                <button class='button-trans'>
                  {% render 'icon', name: 'arrow-right', icon_size: '12' %}
                </button>
              </xo-carousel-next>
            </div>
            <xo-carousel-inner>
              <xo-carousel-list role='list' aria-label='{{ 'general.slider.name' | t }}'>
                {% for product in settings.cart_drawer_collection.products limit: 4 %}
                  <xo-carousel-slide
                    aria-roledescription='{{ 'sections.slideshow.slide' | t }}'
                    aria-label='{{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}'
                  >
                    <xo-product class='collection-product-footer' xo-product-id='{{ product.id }}' xo-section-id='{{section.id}}' xo-line='{{ forloop.index }}'>
                      <div class='collection-product-footer__header'>
                        <div style='overflow: hidden;' xo-binding='img'>
                          <a href='{{ product.url }}' class='collection-product-footer__img'>
                            {% render 'image', image: product.featured_image, media_aspect_ratio: media_aspect_ratio %}
                          </a>
                        </div>
                      </div>
                      <div class='collection-product-footer__content'>
                        <h2 class='collection-product-footer__name-product'>
                          <a href='{{ product.url }}'>
                            {{ product.title | escape }}
                          </a>
                        </h2>
                        <div class='collection-product-footer__price'>
                          <div class='collection-product-footer__price-inner' xo-binding='price'>
                            {% render 'price', product: product, use_variant: true, reverse: false %}
                          </div>
                        </div>
                        <xo-cart-add
                          class='xo-product-card__add'
                          {% if product.selected_or_first_available_variant.available == false %}
                            xo-disabled
                          {% endif %}
                        >
                          <span> + Add to Cart</span>
                        </xo-cart-add>
                      </div>
                      {% render 'product-data', product: product %}
                      {% render 'product-static-data', product: product, media_aspect_ratio: media_aspect_ratio %}
                    </xo-product>
                  </xo-carousel-slide>
                {% endfor %}
              </xo-carousel-list>
            </xo-carousel-inner>
          </xo-carousel>
        {% endif %}
        <div class='xo-modal-content-style__box-footer'>
          {{ footer }}
        </div>
      </div>
    {% endif %}
  </div>
</div>

<script>
  const elementToChange = document.querySelector('.xo-modal-content-style1__body');
  const addClass = document.querySelector('.xo-modal-content-style1__header');
  elementToChange.addEventListener('scroll', function () {
    if (elementToChange.scrollTop > 0) {
      addClass.classList.add('xo-modal-content-style1__header--scroll');
    } else {
      addClass.classList.remove('xo-modal-content-style1__header--scroll');
    }
  });
</script>
