{# Dropdown component — no Alpine, uses data-dz-toggleable + CSS transitions #}
{# Usage: {% include 'components/alpine/dropdown.html' with context %} #}
{# Expects: dropdown_label (str), dropdown_items (list of {label, href?, action?}) #}
<div data-dz-toggleable class="relative">
  <button data-dz-toggle class="btn btn-ghost btn-sm gap-1">
    {{ dropdown_label | default("Actions") }}
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
         class="w-4 h-4 stroke-current transition-transform" data-dz-rotate>
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
    </svg>
  </button>
  <ul data-dz-show="dropdown" style="display:none;"
      class="absolute right-0 mt-1 menu p-1 shadow-md bg-base-100 rounded-lg border border-base-300 w-40 z-50">
    {% for item in dropdown_items | default([]) %}
    <li>
      {% if item.href %}
      <a href="{{ item.href }}" class="{{ item.class | default('') }}">{{ item.label }}</a>
      {% elif item.hx_delete %}
      <button class="{{ item.class | default('') }}"
              hx-delete="{{ item.hx_delete }}"
              hx-confirm="{{ item.confirm | default('Are you sure?') }}"
              hx-target="{{ item.hx_target | default('body') }}">
        {{ item.label }}
      </button>
      {% else %}
      <a href="#" class="{{ item.class | default('') }}">{{ item.label }}</a>
      {% endif %}
    </li>
    {% endfor %}
  </ul>
</div>