{#
/**
 * @file
 * Modal component.
 *
 * @param array $attr
 *   Use it to customize the root element attributes.
 * @param array $modal_attr
 *   Use it to customize the modal element attributes.
 * @param array $overlay_attr
 *   Use it to customize the overlay element attributes.
 * @param array $wrapper_attr
 *   Use it to customize the wrapper element attributes.
 * @param array $container_atrr
 *   Use it to customize the container element attributes.
 * @param array $content_atrr
 *   Use it to customize the content element attributes.
 *
 * @block $open
 *   Use this block to customize the open trigger button.
 * @block $close
 *   Use this block to customize the close trigger button.
 * @block $content
 *   Use this block to set the modal's content.
 */
#}

{# Root attributes #}
{% set attributes = merge_html_attributes(attr ?? null, { data_component: 'Modal' }) %}

{# Modal attributes #}
{% set modal_attributes =
  merge_html_attributes(
    modal_attr ?? null,
    { class: 'z-50 fixed inset-0' },
    {
      data_ref: 'modal',
      role: 'dialog',
      aria_modal: true,
      aria_hidden: true,
      style: { opacity: '0', pointer_events: 'none', visibility: 'hidden' }
    }
  )
%}

{# Overlay attributes #}
{% set overlay_attributes =
  merge_html_attributes(
    overlay_attr ?? null,
    { class: '-z-10 absolute inset-0 bg-black/75' },
    { data_ref: 'overlay', tabindex: '-1' }
  )
%}

{% set wrapper_attributes =
  merge_html_attributes(
    wrapper_attr ?? null,
    { class: 'absolute inset-0 flex items-center justify-center' },
    { class: 'pointer-events-none' }
  )
%}

{# Container attributes #}
{% set container_attributes =
  merge_html_attributes(
    container_attr ?? null,
    { class: 'bg-white rounded shadow-l' },
    {
      data_ref: 'container',
      class: 'z-10 relative max-h-full overflow-x-hidden overflow-y-auto pointer-events-auto'
    }
  )
%}

{# Content attributes #}
{% set content_attributes =
  merge_html_attributes(
    content_attr ?? null,
    { class: 'max-w-3xl p-16 pt-20' },
    { data_ref: 'content' }
  )
%}

<div {{ html_attributes(attributes) }}>
  {% block open %}
    {% include '@ui/Button/Button.twig' with {
      label: 'Open',
      attr: { data_ref: 'open[]' }
    } %}
  {% endblock %}
  <div {{ html_attributes(modal_attributes) }}>
    <div {{ html_attributes(overlay_attributes) }}></div>
    <div {{ html_attributes(wrapper_attributes) }}>
      <div {{ html_attributes(container_attributes) }}>
        {% block close %}
          <div class="absolute top-0 right-0 m-2">
            {% include '@ui/Button/Button.twig' with {
              label: 'Close',
              attr: { data_ref: 'close[]' }
            } %}
          </div>
        {% endblock %}
        <div {{ html_attributes(content_attributes) }}>
          {% block content %}
            No content.
          {% endblock %}
        </div>
      </div>
    </div>
  </div>
</div>