{% load common_extras %}{% comment %}
Reusable styled select dropdown — see the `ui_select` inclusion tag docstring
in apps/common/templatetags/common_extras.py.

Bind `model` to a property in the ENCLOSING x-data scope (an array when
`multiple`, otherwise a string).

Expressions that reference `model` live in Alpine DIRECTIVES (x-text / :class /
@click / x-model / @change), which resolve through the scope chain — NOT in the
x-data methods below, whose plain-JS bodies cannot see the parent scope. That
is why uiLabel() takes the value as an argument instead of reading it. Moving
that logic "inline" to tidy it up silently breaks every call site.

The panel is position:fixed and anchored on open, because the filter toolbars
it lives in scroll horizontally: an absolutely-positioned panel is clipped by
that overflow. Fixed escapes the clipping context at the cost of manual
anchoring, and since the coordinates are captured once, scrolling closes it
rather than letting it drift.

Deviation 5: the trigger styles (.bb-filter-select / .bb-filter-icon) are in
apps/theme/static_src/src/styles.css. Studio keeps them inline in
templates/calendar/calendar.html, so the shared component is unstyled on every
page except that one.
{% endcomment %}
<div class="relative flex-shrink-0"
     x-data="{
        open: false, top: 0, left: 0,
        opts: {{ options_js|json_attr }},
        uiLabel(v){ if (!v) return '{{ placeholder|escapejs }}'; const o = this.opts.find(o => String(o.value) === String(v)); return o ? o.label : '{{ placeholder|escapejs }}'; },
        uiToggle(e){ if (this.open) { this.open = false; return; } const r = e.currentTarget.getBoundingClientRect(); this.top = r.bottom + 4; this.left = Math.min(r.left, window.innerWidth - 236); this.open = true; }
     }"
     @click.away="open = false" @keydown.escape="open = false" @scroll.window="open = false">
    {% include "components/_filter_icon.html" with name=icon %}
    <button type="button" @click="uiToggle($event)"
            class="bb-filter-select bb-filter-trigger{% if icon %} has-icon{% endif %} flex items-center gap-1 whitespace-nowrap"
            :class="({% if multiple %}{{ model }}.length{% else %}{{ model }}{% endif %}) && 'is-active'"
            :aria-expanded="open ? 'true' : 'false'" aria-haspopup="listbox">
        <span x-text="{% if multiple %}{{ model }}.length ? {{ model }}.length + ' selected' : '{{ placeholder|escapejs }}'{% else %}uiLabel({{ model }}){% endif %}"></span>
        <svg class="w-3 h-3 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" style="color: var(--text-ghost);" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
    </button>
    <div x-show="open" x-cloak
         :style="`top:${top}px; left:${left}px;`"
         class="bb-select-panel fixed z-50 w-56 max-h-72 overflow-y-auto py-1"
         role="listbox" {% if multiple %}aria-multiselectable="true"{% endif %}>
        <button type="button"
                @click="{% if multiple %}{{ model }} = []{% else %}{{ model }} = ''; open = false{% endif %}; {{ onchange }}"
                class="btn-surface-1 w-full text-left px-3 py-1.5 text-xs font-semibold border-b"
                style="border-color: var(--border);"
                :class="({% if multiple %}!{{ model }}.length{% else %}!{{ model }}{% endif %}) ? 'bb-option-reset-active' : 'bb-option-reset-idle'">
            {% comment %}
              The placeholder alone. "All channels: all" and "Any label: all"
              read as a stutter, and the placeholder already means "not
              filtered" — it is what the closed control shows when nothing is
              picked, so this row is that state, named the same way.
            {% endcomment %}
            {{ placeholder }}
        </button>
        {% for opt in options %}
        {% if multiple %}
        <label class="btn-surface-1 flex items-center gap-2 px-3 py-1.5 text-xs cursor-pointer" style="color: var(--text-secondary);" role="option">
            <input type="checkbox" class="bb-checkbox" value="{{ opt.value }}" x-model="{{ model }}" @change="{{ onchange }}">
            {% if opt.icon %}<span class="pi-chip {{ opt.icon|platform_class }} w-4 h-4">{% include "partials/_platform_icon.html" with platform=opt.icon size="sm" %}</span>{% endif %}
            <span class="truncate">{{ opt.label }}</span>
        </label>
        {% else %}
        <button type="button" @click="{{ model }} = '{{ opt.value|escapejs }}'; open = false; {{ onchange }}"
                class="btn-surface-1 w-full flex items-center gap-2 px-3 py-1.5 text-xs text-left"
                style="color: var(--text-secondary);"
                role="option" :aria-selected="String({{ model }}) === '{{ opt.value|escapejs }}' ? 'true' : 'false'"
                :class="String({{ model }}) === '{{ opt.value|escapejs }}' && 'bb-option-selected'">
            {% if opt.icon %}<span class="pi-chip {{ opt.icon|platform_class }} w-4 h-4">{% include "partials/_platform_icon.html" with platform=opt.icon size="sm" %}</span>{% endif %}
            <span class="truncate">{{ opt.label }}</span>
        </button>
        {% endif %}
        {% endfor %}
    </div>
</div>