{#
/**
 * @file
 *   Panel component.
 *
 * @param 'top'|'right'|'bottom'|'left' $position
 *   Position of the panel.
 * @param array $wrapper_attr
 *   Custom attributes for the wrapper element.
 */
#}

{% extends '@ui/Modal/Modal.twig' %}

{% set position = position ?? 'left' %}

{% set attr =
  merge_html_attributes(attr ?? null, { data_component: 'Panel', data_option_position: position })
%}

{% set overlay_attr =
  merge_html_attributes(
    overlay_attr ?? null,
    { class: '-z-10 absolute inset-0 bg-black/75' },
    { class: 'transition duration-500 opacity-0' }
  )
%}

{% set wrapper_attr =
  merge_html_attributes(
    wrapper_attr ?? null,
    {},
    {
      class: [
        'z-10 absolute top-0 w-full h-full flex pointer-events-none',
        {
          'top-0 left-0 items-start justify-center': position == 'top',
          'top-0 right-0 items-center justify-end': position == 'right',
          'bottom-0 left-0 items-end justify-center': position == 'bottom',
          'top-0 left-0 items-center justify-start': position == 'left'
        }
      ]
    }
  )
%}

{% set container_attr =
  merge_html_attributes(
    container_attr ?? null,
    {
      class: [
        'max-w-2xl',
        {
          'w-full': position == 'top',
          'h-full': position == 'right',
          'w-full': position == 'bottom',
          'h-full': position == 'left'
        }
      ]
    },
    {
      class: [
        'transform transition duration-500',
        {
          '-translate-y-full': position == 'top',
          'translate-x-full': position == 'right',
          'translate-y-full': position == 'bottom',
          '-translate-x-full': position == 'left'
        }
      ]
    }
  )
%}