{# DropdownMenu, ported from shadcn/ui. Radix's Portal is not needed
   (the panel is absolutely positioned inside a `relative` wrapper, so
   it shares its trigger's stacking context), Floating UI becomes
   x-anchor, and no roving tabindex is needed because the items are real
   <button>/<a> elements Tab already walks.

   `items` is a list of dicts -- data, not markup -- so nothing here has
   to trust an application-supplied HTML string:
     {"label": ..., "icon": ..., "url": ...}   a link
     {"separator": True}                        a divider
     {"label": ...}                             a section label

   The panel always anchors bottom-end; a start-aligned variant belongs
   in its own macro rather than a flag here. #}
{% from "admin/components/icons.html" import icon %}
{% macro dropdown_menu(label, icon_name="dots", text=none, variant=none, items=(), full_width=false) %}
{# full_width makes the trigger fill its line while the toolbar is
   stacked, then shrink to its content at lg. The wrapper needs it too:
   a button can only fill a box that is itself full width. #}
<div class="relative {% if full_width %}flex w-full lg:inline-flex lg:w-auto{% else %}inline-flex{% endif %}"
     x-data="{ open: false }"
     @keydown.escape="open = false; $refs.trigger.focus()"
     @click.outside="open = false">
  {% if text %}
  {# Under full_width the label goes hard left and both icons hard
     right, so a stacked trigger reads like the rest of the toolbar
     instead of floating its content mid-line. The shared order-last
     keeps icon-then-chevron order; the label's flex-1 pushes them. #}
  <button type="button" x-ref="trigger" @click="open = !open"
          :aria-expanded="open ? 'true' : 'false'" aria-haspopup="menu"
          class="{{ ui('button', variant or 'outline', 'size-default') }}{% if full_width %} w-full lg:w-auto{% endif %}">
    {% if icon_name %}
    {{ icon(icon_name, "w-4 h-4" ~ (" " ~ ui('toolbar', 'item-icon') if full_width else "")) }}
    {% endif %}
    <span {% if full_width %}class="{{ ui('toolbar', 'item-label') }}"{% endif %}>{{ text }}</span>
    <span :class="open ? 'rotate-180' : ''"
          class="transition-transform duration-200{% if full_width %} {{ ui('toolbar', 'item-icon') }}{% endif %}">
      {{ icon("chevron-down", "w-3.5 h-3.5") }}
    </span>
  </button>
  {% else %}
  <button type="button" x-ref="trigger" @click="open = !open"
          :aria-expanded="open ? 'true' : 'false'" aria-haspopup="menu"
          aria-label="{{ label }}"
          class="{{ ui('button', variant or 'ghost-muted', 'size-icon-sm') }}">
    {{ icon(icon_name, "w-4 h-4") }}
  </button>
  {% endif %}
  <div x-show="open" x-cloak role="menu"
       x-anchor.bottom-end.offset.6="$refs.trigger"
       x-transition:enter="transition ease-out duration-150"
       x-transition:enter-start="opacity-0 scale-95"
       x-transition:enter-end="opacity-100 scale-100"
       x-transition:leave="transition ease-in duration-100"
       x-transition:leave-start="opacity-100 scale-100"
       x-transition:leave-end="opacity-0 scale-95"
       class="{{ ui('dropdown', 'content') }}">
    {% for item in items %}
    {% if item.get("separator") %}
    <div role="separator" class="{{ ui('dropdown', 'separator') }}"></div>
    {% elif item.get("url") %}
    <a href="{{ item.url }}" role="menuitem" class="{{ ui('dropdown', 'item') }}">
      {% if item.get("icon") %}{{ icon(item.icon, "w-4 h-4 shrink-0") }}{% endif %}<span class="truncate">{{ item.label }}</span>
    </a>
    {% else %}
    <div role="presentation" class="{{ ui('dropdown', 'label') }}">{{ item.label }}</div>
    {% endif %}
    {% endfor %}
  </div>
</div>
{% endmacro %}