{#
/**
 * Dropdown Component
 * 
 * Dropdown menu with Alpine.js state management.
 *
 * Accessibility:
 * - aria-expanded on button
 * - aria-haspopup
 * - Keyboard navigation
 * - Focus management
 */
#}

{% set btn_text = button_text|default('Dropdown') %}
{% set btn_color = button_color|default('primary') %}

<div x-data="{ open: false }" @click.away="open = false" class="relative inline-block text-left">
  <button
    type="button"
    @click="open = !open"
    class="inline-flex justify-center items-center w-full border border-gray-300 shadow-sm px-4 py-2 bg-{{ btn_color }} text-body-bg text-sm font-medium hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-{{ btn_color }} transition-all"
    :aria-expanded="open.toString()"
    aria-haspopup="true"
  >
    {{ btn_text }}
    <svg class="ml-2 -mr-1 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
      <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
    </svg>
  </button>

  <div
    x-show="open"
    x-cloak
    x-transition:enter="transition ease-out duration-100"
    x-transition:enter-start="transform opacity-0 scale-95"
    x-transition:enter-end="transform opacity-100 scale-100"
    x-transition:leave="transition ease-in duration-75"
    x-transition:leave-start="transform opacity-100 scale-100"
    x-transition:leave-end="transform opacity-0 scale-95"
    class="origin-top-right absolute right-0 mt-2 w-56 shadow-lg bg-body-bg ring-1 ring-black ring-opacity-5 z-50"
    role="menu"
  >
    <div class="py-1">
      {% block items %}
        {{ items }}
      {% endblock %}
    </div>
  </div>
</div>

