{% comment %}
  Renders a modal.

  Accepts:
  - title: {String} Name of the product (optional)
  - image: {Image} Image of the product (optional)
  - variant: {liquidHTML} HTML render variant of product (optional)
  - price: { liquidHTML } HTML render price of product (optional)
  - link: { String } google map url (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-pickup',
    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: '7rem'
  assign footer_height = footer_height | default: '7rem'
  assign close_size = close_size | default: '2rem'
  assign content_tag_name = content_tag_name | default: 'div'
%}

{% capture header %}
  {% if title != blank %}
    <div class='xo-modal-pickup__header'>
      <div class='xo-modal-pickup__product'>
        {{ image }}
        <div class='xo-modal-pickup__text'>
          <h2 class='xo-modal-pickup__title{% if title_class %} {{ title_class }}{% endif %}'{% if title_size %} style="--title-size: {{ title_size }}"{% endif %}>{{ title }}</h2>
          {{ variant }}
          {{ price }}
        </div>
      </div>
      <xo-modal-trigger class='xo-modal-pickup__close{% if close_class %} {{ close_class }}{% endif %}'>
        <button aria-label="{{ 'accessibility.close' | t }}">{% render 'icon', name: 'close2', icon_size: '15' %}</button>
      </xo-modal-trigger>
    </div>
  {% else %}
    <xo-modal-trigger class='xo-modal-pickup__close xo-modal-pickup__close--abs{% if close_class %} {{ close_class }}{% endif %}'>
      <button aria-label="{{ 'accessibility.close' | t }}">{% render 'icon', name: 'close2', icon_size: '15' %}</button>
    </xo-modal-trigger>
  {% endif %}
{% endcapture %}

<div
  class='xo-modal-pickup'
  style='--width: {{ width }}; --height: {{ height }}; --header-height: {{ header_height }}; --footer-height: {{ footer_height }}'
>
  <div class='xo-modal-pickup__inner{% if full_height %} xo-modal-pickup__inner--full-height{% endif %}{% if full_width %} xo-modal-pickup__inner--full-width{% endif %}'>
    {% if animate %}
      <xo-animate xo-cascade>
        {{ header }}
        {% if header_separator %}
          <div class='xo-modal-pickup__separator'></div>
        {% endif %}
      </xo-animate>
    {% else %}
      {{ header }}
    {% endif %}
    <{{ content_tag_name }} class='xo-modal-pickup__body{% unless scroll_disabled %} xo-scrollbar{% endunless %}'>
      <div class='xo-modal-pickup__content{% if content_class %} {{ content_class }}{% endif %}'>
        {{ content }}
      </div>
    </{{ content_tag_name }}>
    {% if footer %}
      {% if footer_separator %}
        <div class='xo-modal-pickup__separator'></div>
      {% endif %}
      <div class='xo-modal-pickup__footer{% if footer_class %} {{ footer_class }}{% endif %}'>
        {{ footer }}
      </div>
    {% endif %}
  </div>
</div>
