{#- chirp-ui: Dropdown menu, select, and split-button primitives.
    Includes item menus, combobox/listbox-style dropdown_select controls,
    and primary-action split menus. 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']"
     :data-align-x="alignX"
     :data-align-y="alignY"
     x-data="chirpuiDropdown()"
     @keydown.escape.prevent.stop="close($refs.trigger)"
     @focusin.window="!$refs.panel?.contains($event.target) && close($refs.trigger)"
     @click.outside="close($refs.trigger)"
     @resize.window="open && reposition()">
    <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"
           data-label="{{ item.get("label", "") }}" data-href="{{ href }}"
           {{ route_link_attrs(href) | html_attrs }}
           @click="selectItem($el, $refs.trigger)">
            {% 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-label="{{ item.get("label", "") }}" data-action="{{ action }}" role="menuitem"
                @click="selectItem($el, $refs.trigger)">
            {% 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"
              data-label="{{ item.get("label", "") }}"
              @click="selectItem($el, $refs.trigger)">
            {% 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 }}"
     data-selected="{{ display | e }}"
     :data-align-x="alignX"
     :data-align-y="alignY"
     x-data="chirpuiDropdownSelect()"
     x-init="init()"
     @keydown.escape.prevent.stop="close($refs.trigger)"
     @focusin.window="!$refs.panel?.contains($event.target) && close($refs.trigger)"
     @click.outside="close($refs.trigger)"
     @resize.window="open && reposition()">
    <div class="chirpui-dropdown__trigger chirpui-dropdown__trigger--select" x-ref="trigger"
         role="combobox" tabindex="0" aria-label="{{ trigger_label }}" 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-cloak 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 }}" data-value="{{ val | e }}"
             @click="selected = $el.dataset.label; close($refs.trigger); $dispatch('chirpui:dropdown-selected', { label: $el.dataset.label, value: $el.dataset.value })">
            {% 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']"
     :data-align-x="alignX"
     :data-align-y="alignY"
     x-data="chirpuiDropdown()"
     @keydown.escape.prevent.stop="close($refs.trigger)"
     @focusin.window="!$refs.panel?.contains($event.target) && close($refs.trigger)"
     @click.outside="close($refs.trigger)"
     @resize.window="open && reposition()">
    {% if primary_href %}
    <a href="{{ primary_href }}" class="chirpui-dropdown__split-primary chirpui-btn chirpui-btn--primary chirpui-btn--sm"{{ route_link_attrs(primary_href) | html_attrs }}>
        {% 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-cloak x-transition
         @click="close()">
        {% for item in items %}
        {% if item.get("divider") %}
        <div class="chirpui-dropdown__divider" role="separator"></div>
        {% else %}
        {% set item_href = item.get("href") %}
        {% set variant = item.get("variant", "default") | validate_variant_block("dropdown__item", "default") %}
        {% if item_href %}
        <a class="chirpui-dropdown__item chirpui-dropdown__item--{{ variant }}" href="{{ item_href }}" role="menuitem"
           data-label="{{ item.get("label", "") }}" data-href="{{ item_href }}"
           {{ route_link_attrs(item_href) | html_attrs }}
           @click="selectItem($el, $refs.trigger)">
            {% 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-label="{{ item.get("label", "") }}" data-action="{{ item.get('action', '') }}" role="menuitem"
                @click="selectItem($el, $refs.trigger)">
            {% if item.get("icon") %}<span class="chirpui-dropdown__icon">{{ item.get("icon") }}</span>{% endif %}
            {{ item.get("label", "") }}
        </button>
        {% endif %}
        {% endif %}
        {% endfor %}
    </div>
</div>
{% end %}