{% load ui_assets ui_classes ui_props %}
{% ui_require_asset "trellis:select" %}

<c-vars name=""
        options_id=""
        value=""
        values=""
        placeholder=""
        mode="listbox"
        multiple="False"
        searchable="False"
        virtualized="False"
        options_fetch_url=""
        options_total_items="0"
        option_item_size="36"
        option_buffer_size="50"
        option_overscan="0"
        option_search_param="q"
        option_search_debounce="150"
        selected_label_map="{}"
        creatable="False"
        filter="True"
        clearable="False"
        clear="stay"
        suffix="selected"
        mark="check"
        open="False"
        disabled="False"
        readonly="False"
        required="False"
        invalid="False"
        auto_highlight="True"
        loop="True"
        path=""
        size="lg"
        variant="outline"
        radius="md"
        surface="+2"
        elevation="3"
        side="bottom"
        align="start"
        offset="0"
        gap="4"
        empty="No results found."
        icon=""
        icon_trailing="chevron__down"
        icon_variant="outline"
        button_class=""
        input_class=""
        listbox_class=""
        option_class=""
        chip_variant="soft"
        chip_color="neutral"
        chip_class=""
        form=""
        label=""
        description=""
        description_trailing=""
        error=""
        badge=""
        class="" />
{% ui_class "ui.select" "root" class=class as root_class %}
{% if mode == "pillbox" and not value and not values %}
    {% ui_class "ui.select" "control" size=size variant=variant radius=radius mode=mode empty=True as control_class %}
{% else %}
    {% ui_class "ui.select" "control" size=size variant=variant radius=radius mode=mode empty=False as control_class %}
{% endif %}
{% ui_class "ui.select" "button" class=button_class as button_class_resolved %}
{% ui_class "ui.select" "pillboxTrigger" as pillbox_trigger_class %}
{% ui_class "ui.select" "value" as value_class %}
{% ui_class "ui.select" "placeholder" as placeholder_class %}
{% ui_class "ui.select" "input" class=input_class as input_class_resolved %}
{% ui_class "ui.select" "sheetHeader" as sheet_header_class %}
{% ui_class "ui.select" "sheetHeading" as sheet_heading_class %}
{% ui_class "ui.select" "sheetTitle" as sheet_title_class %}
{% ui_class "ui.select" "sheetClose" as sheet_close_class %}
{% ui_class "ui.select" "chips" as chips_class %}
{% ui_class "ui.select" "icon" position="leading" as leading_icon_class %}
{% ui_class "ui.select" "icon" position="trailing" as trailing_icon_class %}
{% ui_class "ui.select" "action" as action_class %}
{% ui_class "ui.select" "popover" class=listbox_class as popover_class %}
{% ui_class "ui.select" "listbox" as listbox_class_resolved %}
{% ui_class "ui.select" "viewport" as viewport_class %}
{% ui_class "ui.select" "options" as options_class %}
{% ui_class "ui.select" "virtualOptions" as virtual_options_class %}
{% ui_class "ui.select" "create" as create_class %}
{% ui_class "ui.select" "nativeWrapper" class=class as native_wrapper_class %}
{% ui_class "ui.select" "native" size=size radius=radius as native_class %}
{% ui_class "ui.select" "nativeIcon" as native_icon_class %}
{% ui_class "ui.chrome" "iconXs" as chrome_icon_xs_class %}
{% if mode == "native" %}
    <div data-ui-select-native-wrapper class="{{ native_wrapper_class }}">
        <select data-ui-control
                data-ui-control-recipe="field"
                data-ui-select-native
                data-mode="native"
                data-variant="{{ variant }}"
                data-size="{{ size }}"
                data-radius="{{ radius }}"
                class="{{ native_class }}"
                {% if name %}name="{{ name }}"{% endif %}
                {% if multiple|ui_bool %}multiple{% endif %}
                {% if required|ui_bool %}required{% endif %}
                {% if disabled|ui_bool %}disabled data-disabled="true"{% endif %}
                {% if invalid|ui_bool or error %}aria-invalid="true"{% endif %}
                {{ attrs }}>
            {{ slot }}
        </select>
        {% if not multiple|ui_bool %}
            <c-component is="icons.chevron__down"
                         class="{{ native_icon_class }}"
                         data-ui-select-native-icon
                         aria-hidden="true" />
        {% endif %}
    </div>
{% else %}
    <div x-data="UiSelect"
         x-bind="root"
         data-ui-select
         data-state="closed"
         data-name="{{ name }}"
         data-options-id="{{ options_id }}"
         data-value="{{ value }}"
         data-values="{{ values }}"
         data-placeholder="{{ placeholder }}"
         data-mode="{{ mode }}"
         data-multiple="{{ multiple }}"
         data-searchable="{{ searchable }}"
         data-virtualized="{{ virtualized }}"
         data-options-fetch-url="{{ options_fetch_url }}"
         data-options-total-items="{{ options_total_items }}"
         data-option-item-size="{{ option_item_size }}"
         data-option-buffer-size="{{ option_buffer_size }}"
         data-option-overscan="{{ option_overscan }}"
         data-option-search-param="{{ option_search_param }}"
         data-option-search-debounce="{{ option_search_debounce }}"
         data-selected-label-map="{{ selected_label_map }}"
         data-creatable="{{ creatable }}"
         data-filter="{{ filter }}"
         {% if clearable|ui_bool %}data-clearable="true"{% endif %}
         data-clear="{{ clear }}"
         data-suffix="{{ suffix }}"
         data-mark="{{ mark }}"
         data-open="{{ open }}"
         {% if disabled|ui_bool %}data-disabled="true"{% endif %}
         {% if readonly|ui_bool %}data-readonly="true"{% endif %}
         {% if required|ui_bool %}data-required="true"{% endif %}
         {% if invalid|ui_bool or error %}data-invalid="true"{% endif %}
         data-auto-highlight="{{ auto_highlight }}"
         data-loop="{{ loop }}"
         data-path="{{ path }}"
         data-size="{{ size }}"
         data-variant="{{ variant }}"
         data-radius="{{ radius }}"
         data-surface="{{ surface }}"
         data-elevation="{{ elevation }}"
         data-side="{{ side }}"
         data-align="{{ align }}"
         data-offset="{{ offset }}"
         data-gap="{{ gap }}"
         data-empty="{{ empty }}"
         data-icon="{{ icon }}"
         data-icon-trailing="{{ icon_trailing }}"
         data-icon-variant="{{ icon_variant }}"
         data-button-class="{{ button_class }}"
         data-input-class="{{ input_class }}"
         data-listbox-class="{{ listbox_class }}"
         data-option-class="{{ option_class }}"
         data-chip-variant="{{ chip_variant }}"
         data-chip-color="{{ chip_color }}"
         data-chip-class="{{ chip_class }}"
         data-form="{{ form }}"
         data-class="{{ class }}"
         class="{{ root_class }}"
         {% if "x-ui-transition:opening" not in attrs %}x-ui-transition:opening="$ui.motion($transition).animate('[popover]', $ui.motion.presets.popover.in).role('feedback').play()"{% endif %}
         {% if "x-ui-transition:closing" not in attrs %}x-ui-transition:closing="$ui.motion($transition).animate('[popover]', $ui.motion.presets.popover.out).role('feedback').play()"{% endif %}
         {{ attrs }}>
        <div data-ui-control
             data-ui-control-recipe="field"
             data-ui-select-control
             data-state="closed"
             data-variant="{{ variant }}"
             data-radius="{{ radius }}"
             {% if mode == "pillbox" and not value and not values %}data-empty="true"{% endif %}
             {% if disabled|ui_bool %}data-disabled="true"{% endif %}
             {% if invalid|ui_bool or error %}data-invalid="true"{% endif %}
             class="{{ control_class }}">
            {% if icon %}
                <c-component is="icons.{{ icon }}"
                             class="{{ leading_icon_class }}"
                             data-ui-select-icon="leading"
                             data-icon="{{ icon }}"
                             data-icon-variant="{{ icon_variant }}"
                             aria-hidden="true" />
            {% endif %}
            {% if mode == "pillbox" and multiple|ui_bool %}
                <div data-ui-select-chips class="{{ chips_class }}" hidden></div>
                <button type="button"
                       data-ui-select-trigger
                       data-ui-select-button
                       data-ui-select-pillbox-trigger
                       class="{{ button_class_resolved }} {{ pillbox_trigger_class }}"
                       {% if disabled|ui_bool %}disabled{% endif %}
                       {% if invalid|ui_bool or error %}aria-invalid="true"{% endif %}
                       aria-label="{% if label %}{{ label }}{% else %}{{ placeholder }}{% endif %}"
                       aria-expanded="false">
                    <c-ui.text as="span"
                               size="2"
                               color="inherit"
                               truncate="True"
                               class="{{ placeholder_class }}"
                               data-ui-select-button-placeholder>
                        {{ placeholder }}
                    </c-ui.text>
                </button>
            {% elif mode == "combobox" %}
                <input type="text"
                       data-ui-select-trigger
                       data-ui-select-input
                       class="{{ input_class_resolved }}"
                       placeholder="{{ placeholder }}"
                       {% if disabled|ui_bool %}disabled{% endif %}
                       {% if readonly|ui_bool %}readonly{% endif %}
                       {% if invalid|ui_bool or error %}aria-invalid="true"{% endif %}
                       {% if label %}aria-label="{{ label }}"{% endif %}
                       aria-autocomplete="list"
                       aria-expanded="false"
                       autocomplete="off">
            {% else %}
                <button type="button"
                        data-ui-select-trigger
                        data-ui-select-button
                        class="{{ button_class_resolved }}"
                        {% if disabled|ui_bool %}disabled{% endif %}
                        {% if label %}aria-label="{{ label }}"{% endif %}
                        {% if invalid|ui_bool or error %}aria-invalid="true"{% endif %}
                        aria-expanded="false">
                    <c-ui.text as="span"
                               size="2"
                               color="inherit"
                               truncate="True"
                               class="{{ value_class }}"
                               data-ui-select-button-value
                               hidden>
                    </c-ui.text>
                    <c-ui.text as="span"
                               size="2"
                               color="inherit"
                               truncate="True"
                               class="{{ placeholder_class }}"
                               data-ui-select-button-placeholder>
                        {{ placeholder }}
                    </c-ui.text>
                </button>
            {% endif %}
            {% if clearable|ui_bool %}
                <button type="button"
                        data-ui-control-action
                        data-ui-select-clear
                        data-ui-select-button-clear
                        class="{{ action_class }}"
                        aria-label="Clear selection"
                        {% if disabled|ui_bool %}disabled{% endif %}
                        hidden>
                    <c-component is="icons.close" class="{{ chrome_icon_xs_class }}" aria-hidden="true" />
                </button>
            {% endif %}
            {% if icon_trailing %}
                <c-component is="icons.{{ icon_trailing }}"
                             class="{{ trailing_icon_class }}"
                             data-ui-select-icon="trailing"
                             data-icon="{{ icon_trailing }}"
                             data-icon-variant="{{ icon_variant }}"
                             aria-hidden="true" />
            {% endif %}
        </div>
        <div data-ui-select-hidden-inputs></div>
        {% if mode == "pillbox" and multiple|ui_bool %}
            <template data-ui-select-chip-remove-icon>
                <c-component is="icons.close" class="{{ chrome_icon_xs_class }}" aria-hidden="true" />
            </template>
        {% endif %}
        <div data-ui-select-popover
             data-state="closed"
             data-ui-surface="{{ surface }}"
             data-ui-elevation="{{ elevation }}"
             popover="manual"
             hidden
             class="{{ popover_class }}">
            <header data-ui-select-sheet-header class="{{ sheet_header_class }}">
                <div data-ui-select-sheet-heading class="{{ sheet_heading_class }}">
                    <span data-ui-select-sheet-title class="{{ sheet_title_class }}">
                        {% if label %}{{ label }}{% elif placeholder %}{{ placeholder }}{% else %}Choose an option{% endif %}
                    </span>
                    <button type="button"
                            data-ui-select-sheet-close
                            class="{{ sheet_close_class }}"
                            aria-label="Close options">
                        <c-component is="icons.close" class="{{ chrome_icon_xs_class }}" aria-hidden="true" />
                    </button>
                </div>
                {% if search %}
                    {{ search }}
                {% elif searchable|ui_bool or mode == "combobox" %}
                    <c-ui.select.search />
                {% endif %}
            </header>
            <div data-ui-select-listbox
                 role="listbox"
                 tabindex="-1"
                 class="{{ listbox_class_resolved }}">
                {% if virtualized|ui_bool and options_fetch_url %}
                    <div data-ui-select-options
                         {% if options_id %}id="{{ options_id }}"{% endif %}
                         class="min-h-0">
                        <c-ui.virtualizer fetch_url="{{ options_fetch_url }}"
                                          total_items="{{ options_total_items }}"
                                          item_size="{{ option_item_size }}"
                                          buffer_size="{{ option_buffer_size }}"
                                          overscan="{{ option_overscan }}"
                                          scroll_area="True"
                                          fill="False"
                                          scroll_area_class="{{ viewport_class }}"
                                          block_class="{{ virtual_options_class }}"
                                          data-ui-select-viewport
                                          data-ui-select-virtualizer>
                            {{ slot }}
                        </c-ui.virtualizer>
                    </div>
                {% else %}
                    <c-ui.scroll-area orientation="vertical"
                                      data-ui-select-viewport
                                      class="{{ viewport_class }}">
                        <div data-ui-select-options
                             {% if options_id %}id="{{ options_id }}"{% endif %}
                             class="{{ options_class }}">{{ slot }}</div>
                    </c-ui.scroll-area>
                {% endif %}
                <c-ui.select.option.empty>
                    {{ empty }}
                </c-ui.select.option.empty>
                {% if create %}
                    <div data-ui-select-create class="{{ create_class }}">{{ create }}</div>
                {% elif creatable|ui_bool %}
                    <div data-ui-select-create class="{{ create_class }}">
                        <c-ui.select.option.create>
                            Create “<span data-ui-select-create-query></span>”
                        </c-ui.select.option.create>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
{% endif %}