{% load ui_classes ui_props %}

<c-vars name=""
        value=""
        values=""
        placeholder=""
        mode="listbox"
        multiple="False"
        searchable="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"
        side="bottom"
        align="start"
        offset="0"
        gap="4"
        empty="No results found."
        search_placeholder="Search..."
        search_icon="search"
        icon=""
        icon_trailing="chevron__down"
        icon_variant="outline"
        button_class=""
        input_class=""
        search_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" "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" "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" "viewport" as viewport_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 %}
{% if mode == "native" %}
    <div data-ui-select-native-wrapper class="{{ native_wrapper_class }}">
        <select data-ui-select-native
                data-mode="native"
                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{% 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-value="{{ value }}"
         data-values="{{ values }}"
         data-placeholder="{{ placeholder }}"
         data-mode="{{ mode }}"
         data-multiple="{{ multiple }}"
         data-searchable="{{ searchable }}"
         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-side="{{ side }}"
         data-align="{{ align }}"
         data-offset="{{ offset }}"
         data-gap="{{ gap }}"
         data-empty="{{ empty }}"
         data-search-placeholder="{{ search_placeholder }}"
         data-search-icon="{{ search_icon }}"
         data-icon="{{ icon }}"
         data-icon-trailing="{{ icon_trailing }}"
         data-icon-variant="{{ icon_variant }}"
         data-button-class="{{ button_class }}"
         data-input-class="{{ input_class }}"
         data-search-class="{{ search_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 }}"
         {{ attrs }}>
        <div data-ui-control
             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>
                <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">
            {% 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="sm"
                               color="inherit"
                               truncate="True"
                               class="{{ value_class }}"
                               data-ui-select-button-value
                               hidden>
                    </c-ui.text>
                    <c-ui.text as="span"
                               size="sm"
                               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-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="size-icon-xs fill-current" 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="size-icon-xs fill-current" aria-hidden="true" />
            </template>
        {% endif %}
        <div data-ui-select-popover
             data-state="closed"
             popover="manual"
             hidden
             class="{{ popover_class }}">
            {% if searchable|ui_bool and mode != "combobox" and mode != "pillbox" %}
                <c-ui.select.search placeholder="{{ search_placeholder }}"
                                    icon="{{ search_icon }}"
                                    clearable="{{ clearable }}"
                                    class="{{ search_class }}" />
            {% endif %}
            <div data-ui-select-listbox role="listbox" tabindex="-1">
                <div data-ui-select-viewport class="{{ viewport_class }}">{{ slot }}</div>
                <c-ui.select.option.empty>
                    {{ empty }}
                </c-ui.select.option.empty>
            </div>
        </div>
    </div>
{% endif %}