{# SerenityAdmin/Dropdown.html.twig #}
{% props title = null, align = 'right', iconOnly = false %}

<div
  x-data="dropdownPortal({ align: '{{ align }}' })"
  class="relative flex"
  x-on:dropdown-close.window="close()"
  x-on:modal:close.window="close()">
  <button
    type="button"
    x-ref="btn"
    x-on:click="toggle()"
    class="
          inline-flex items-center justify-center
          {{ iconOnly
      ? 'h-9 w-9 rounded-lg text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700'
      : 'rounded-full px-3 text-sm group'
      }}
          focus:outline-none focus:ring-0
          focus-visible:ring-2 focus-visible:ring-gray-300
          cursor-pointer
    "
    aria-haspopup="true"
    :aria-expanded="open">
    {% if iconOnly %}
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-5 w-5"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round">
        <circle cx="12" cy="12" r="1"/>
        <circle cx="19" cy="12" r="1"/>
        <circle cx="5" cy="12" r="1"/>
      </svg>
    {% else %}
      <span class="font-medium group-hover:underline">{{ title }}</span>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="ml-1 h-4 w-4 text-gray-500"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6"/>
      </svg>
    {% endif %}
  </button>

  {# Menu téléporté dans le body pour échapper au overflow du tableau #}
  <template x-teleport="body">
    <ul
      x-ref="menu"
      x-show="open"
      x-transition:enter="transition-all duration-200 ease-out"
      x-transition:enter-start="transform opacity-0"
      x-transition:enter-end="transform opacity-100"
      x-transition:leave="transition-all duration-150 ease-in"
      x-transition:leave-start="transform opacity-100"
      x-transition:leave-end="transform opacity-0"
      class="fixed z-[9999] mt-2 min-w-fit rounded border bg-white p-2 text-sm whitespace-nowrap opacity-0 shadow-md transition-opacity duration-150 ltr:text-left rtl:text-right dark:border-gray-700 dark:bg-gray-800"
      x-cloak
      style="display:none; visibility:hidden;">
      {% block content -%}
      {%- endblock %}
    </ul>
  </template>
</div>
