{#- chirp-ui: Dropdown menu (items-based)
    Trigger + items list. Items: {label, href?} or {label, action?, variant?, icon?, divider?}
    Requires Alpine.js for behavior.

    Usage:
        from "chirpui/dropdown_menu.html" import dropdown_menu, dropdown_select, dropdown_split
        from "chirpui/button.html" import btn

        {{ dropdown_menu(btn("Actions", icon="▾"), items=[...]) }}
-#}

{% def dropdown_menu(trigger, items, id="chirpui-dropdown") %}
{% set dropdown_id = id %}
<div class="chirpui-dropdown" id="{{ dropdown_id }}" x-id="['dropdown-menu']"
     x-data="{
       open: false,
       toggle() { if (this.open) return this.close(); this.$refs.trigger?.focus(); this.open = true },
       close(focusAfter) { if (!this.open) return; this.open = false; focusAfter?.focus() }
     }"
     @keydown.escape.prevent.stop="close($refs.trigger)"
     @focusin.window="!$refs.panel?.contains($event.target) && close($refs.trigger)"
     @click.outside="close($refs.trigger)">
    <div class="chirpui-dropdown__trigger" x-ref="trigger"
         role="button" tabindex="0" aria-haspopup="menu" :aria-expanded="open"
         :aria-controls="$id('dropdown-menu')"
         @click="toggle()">
        {{ trigger }}
    </div>
    <div class="chirpui-dropdown__menu" x-ref="panel" :id="$id('dropdown-menu')" role="menu"
         aria-orientation="vertical"
         x-show="open" x-cloak x-transition
         @click="close()">
        {% for item in items %}
        {% if item.get("divider") %}
        <div class="chirpui-dropdown__divider" role="separator"></div>
        {% else %}
        {% set href = item.get("href") %}
        {% set action = item.get("action") %}
        {% set variant = item.get("variant", "default") | validate_variant_block("dropdown__item", "default") %}
        {% set icon = item.get("icon", "") %}
        {% if href %}
        <a class="chirpui-dropdown__item chirpui-dropdown__item--{{ variant }}" href="{{ href }}" role="menuitem"
           @click="close($refs.trigger); $dispatch('chirpui:dropdown-selected', { label: '{{ item.get("label", "") | e }}', href: '{{ href | e }}' })">
            {% if icon %}<span class="chirpui-dropdown__icon" aria-hidden="true">{{ icon }}</span>{% endif %}
            {{ item.get("label", "") }}
        </a>
        {% elif action %}
        <button type="button" class="chirpui-dropdown__item chirpui-dropdown__item--{{ variant }}"
                data-action="{{ action }}" role="menuitem"
                @click="close($refs.trigger); $dispatch('chirpui:dropdown-selected', { label: '{{ item.get("label", "") | e }}', action: '{{ action | e }}' })">
            {% if icon %}<span class="chirpui-dropdown__icon" aria-hidden="true">{{ icon }}</span>{% endif %}
            {{ item.get("label", "") }}
        </button>
        {% else %}
        <span class="chirpui-dropdown__item chirpui-dropdown__item--{{ variant }}" role="menuitem"
              @click="close($refs.trigger); $dispatch('chirpui:dropdown-selected', { label: '{{ item.get("label", "") | e }}' })">
            {% if icon %}<span class="chirpui-dropdown__icon" aria-hidden="true">{{ icon }}</span>{% endif %}
            {{ item.get("label", "") }}
        </span>
        {% endif %}
        {% endif %}
        {% endfor %}
    </div>
</div>
{% end %}

{% def dropdown_select(trigger_label, items, selected=none, id="chirpui-dropdown-select") %}
{% set sel = selected or (items[0].get("value", items[0].get("label"))) if items else "" %}
{% set display = items[0].get("label", items[0].get("value", "")) if items else "" %}
{% for it in items %}
{% if it.get("value") == sel or it.get("label") == sel %}
{% set display = it.get("label", it.get("value", "")) %}
{% endif %}
{% endfor %}
<div class="chirpui-dropdown chirpui-dropdown--select" id="{{ id }}" x-id="['dropdown-select', 'listbox-option']"
     data-item-count="{{ items|length }}"
     x-data="{
       open: false, selected: '{{ display | e }}', focusedIndex: 0,
       toggle() { if (this.open) return this.close(); this.open = true; this.$nextTick(() => { this.focusedIndex = 0; this.$refs['item-0']?.focus() }) },
       close(focusAfter) { if (!this.open) return; this.open = false; focusAfter?.focus() },
       keyDown() { const m = parseInt(this.$el.dataset.itemCount || '0', 10) - 1; if (this.focusedIndex < m) { this.focusedIndex++; this.$refs['item-' + this.focusedIndex]?.focus() } },
       keyUp() { if (this.focusedIndex > 0) { this.focusedIndex--; this.$refs['item-' + this.focusedIndex]?.focus() } },
       keyEnter() { const el = this.$refs['item-' + this.focusedIndex]; if (el) { this.selected = el.dataset.label; this.open = false; this.close(this.$refs.trigger); this.$dispatch('chirpui:dropdown-selected', { label: el.dataset.label, value: el.dataset.label }) } }
     }"
     @keydown.escape.prevent.stop="close($refs.trigger)"
     @focusin.window="!$refs.panel?.contains($event.target) && close($refs.trigger)"
     @click.outside="close($refs.trigger)">
    <div class="chirpui-dropdown__trigger chirpui-dropdown__trigger--select" x-ref="trigger"
         role="combobox" tabindex="0" aria-haspopup="listbox" :aria-expanded="open"
         :aria-controls="$id('dropdown-select')" :aria-activedescendant="open ? $id('listbox-option', focusedIndex) : ''"
         @click="toggle()">
        <span class="chirpui-dropdown__selected" x-text="selected">{{ display }}</span>
        <span class="chirpui-dropdown__caret" aria-hidden="true">▾</span>
    </div>
    <div class="chirpui-dropdown__menu" x-ref="panel" :id="$id('dropdown-select')" role="listbox"
         x-show="open" x-transition
         @keydown.down.prevent="keyDown()"
         @keydown.up.prevent="keyUp()"
         @keydown.enter.prevent="keyEnter()"
         @click="close()">
        {% for item in items %}
        {% set val = item.get("value", item.get("label")) %}
        {% set lbl = item.get("label", val) %}
        <div class="chirpui-dropdown__item chirpui-dropdown__item--select"
             x-ref="item-{{ loop.index0 }}"
             :id="$id('listbox-option', {{ loop.index0 }})"
             :class="{ 'chirpui-dropdown__item--selected': selected === $el.dataset.label }"
             role="option" tabindex="-1" data-label="{{ lbl | e }}"
             @click="selected = $el.dataset.label; close($refs.trigger); $dispatch('chirpui:dropdown-selected', { label: $el.dataset.label, value: $el.dataset.label })">
            {% if item.get("icon") %}<span class="chirpui-dropdown__icon">{{ item.get("icon") }}</span>{% endif %}
            {{ lbl }}
        </div>
        {% endfor %}
    </div>
</div>
{% end %}

{% def dropdown_split(primary_label, primary_href=none, primary_action=none, items=[], icon=none) %}
<div class="chirpui-dropdown chirpui-dropdown--split" x-id="['dropdown-split']"
     x-data="{
       open: false,
       toggle() { if (this.open) return this.close(); this.$refs.trigger?.focus(); this.open = true },
       close(focusAfter) { if (!this.open) return; this.open = false; focusAfter?.focus() }
     }"
     @keydown.escape.prevent.stop="close($refs.trigger)"
     @focusin.window="!$refs.panel?.contains($event.target) && close($refs.trigger)"
     @click.outside="close($refs.trigger)">
    {% if primary_href %}
    <a href="{{ primary_href }}" class="chirpui-dropdown__split-primary chirpui-btn chirpui-btn--primary chirpui-btn--sm">
        {% if icon %}<span aria-hidden="true">{{ icon }}</span>{% endif %}
        {{ primary_label }}
    </a>
    {% elif primary_action %}
    <button type="button" class="chirpui-dropdown__split-primary chirpui-btn chirpui-btn--primary chirpui-btn--sm"
            data-action="{{ primary_action }}">
        {% if icon %}<span aria-hidden="true">{{ icon }}</span>{% endif %}
        {{ primary_label }}
    </button>
    {% endif %}
    <div class="chirpui-dropdown__trigger chirpui-dropdown__trigger--split" x-ref="trigger"
         role="button" tabindex="0" aria-haspopup="menu" :aria-expanded="open"
         :aria-controls="$id('dropdown-split')"
         @click="toggle()">
        <span class="chirpui-dropdown__caret" aria-hidden="true">▾</span>
    </div>
    <div class="chirpui-dropdown__menu" x-ref="panel" :id="$id('dropdown-split')" role="menu"
         x-show="open" x-transition
         @click="close()">
        {% for item in items %}
        {% if item.get("divider") %}
        <div class="chirpui-dropdown__divider" role="separator"></div>
        {% else %}
        {% set variant = item.get("variant", "default") | validate_variant_block("dropdown__item", "default") %}
        {% if item.get("href") %}
        <a class="chirpui-dropdown__item chirpui-dropdown__item--{{ variant }}" href="{{ item.get('href') }}" role="menuitem"
           @click="close($refs.trigger); $dispatch('chirpui:dropdown-selected', { label: '{{ item.get("label", "") | e }}', href: '{{ item.get("href", "") | e }}' })">
            {% if item.get("icon") %}<span class="chirpui-dropdown__icon">{{ item.get("icon") }}</span>{% endif %}
            {{ item.get("label", "") }}
        </a>
        {% else %}
        <button type="button" class="chirpui-dropdown__item chirpui-dropdown__item--{{ variant }}"
                data-action="{{ item.get('action', '') }}" role="menuitem"
                @click="close($refs.trigger); $dispatch('chirpui:dropdown-selected', { label: '{{ item.get("label", "") | e }}', action: '{{ item.get("action", "") | e }}' })">
            {% if item.get("icon") %}<span class="chirpui-dropdown__icon">{{ item.get("icon") }}</span>{% endif %}
            {{ item.get("label", "") }}
        </button>
        {% endif %}
        {% endif %}
        {% endfor %}
    </div>
</div>
{% end %}