{#
  Modal option picker — opens global modal instead of an inline dropdown.

  Usage – static options (navigate mode, e.g. pagination):
    {% from "_custom_select.html" import custom_select %}
    {{ custom_select(id="pagination-limit", options=[...], selected_value=..., selected_label=..., mode="navigate", class="...") }}

  Usage – form mode with data_setting_key (admin):
    {{ custom_select(id="smtp-encryption", data_setting_key="smtp_encryption", options=[...], ...) }}

  Usage – dynamic options (JS: populateCustomSelect(id, options, selectedValue)):
    {{ custom_select(id="source-branch-select", options=[], selected_value="", selected_label="Loading...", mode="form", dynamic=true, ...) }}
#}
{% macro custom_select(id, name=none, options=[], selected_value="", selected_label=none, mode="form", dynamic=false, placeholder="Select...", class="", disabled=false, data_setting_key=none, menu_position="bottom", picker_title="", show_chevron=true, compact=false) %}
<div class="modal-select relative overflow-visible {% if compact %}inline-block w-auto max-w-full{% endif %} {{ class }}"
    data-select-id="{{ id }}"
    data-mode="{{ mode }}"
    data-placeholder="{{ placeholder }}"
    data-picker-title="{{ picker_title or placeholder }}"
    {# tojson returns Markup; |e does not re-escape Markup, so raw " would break this attribute. #}
    data-options-json="{{ options|tojson|forceescape }}"
    {% if disabled %}data-disabled="true"{% endif %}>
    <input type="hidden" id="{{ id }}" name="{{ name or '' }}" value="{{ selected_value }}"
        {% if data_setting_key %}data-setting-key="{{ data_setting_key }}"{% endif %}>
    <button type="button"
        class="modal-select-trigger flex items-center rounded-xl text-sm font-medium text-white cursor-pointer transition-colors border bg-zinc-900/50 border-white/10 hover:border-white/20 focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-white/20 focus-visible:border-white/20 disabled:opacity-50 disabled:cursor-not-allowed {% if compact %}w-auto min-w-0 px-3 py-2 {% if show_chevron %}justify-between gap-2{% else %}justify-center{% endif %}{% else %}w-full justify-between gap-2 text-left py-2.5 px-4{% endif %}"
        style="background: rgba(var(--theme-r), var(--theme-g), var(--theme-b), calc(var(--glass-opacity) * 0.08)); border-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.2);"
        aria-haspopup="dialog" aria-expanded="false"
        {% if disabled %}disabled{% endif %}>
        <span class="modal-select-value {% if compact %}whitespace-nowrap{% else %}truncate{% endif %}">{{ selected_label or placeholder }}</span>
        {% if show_chevron %}<i data-lucide="chevron-down" class="h-4 w-4 text-zinc-400 shrink-0"></i>{% endif %}
    </button>
</div>
{% endmacro %}