{% load ui_classes ui_props %}

<c-vars name=""
        value=""
        values=""
        placeholder=""
        multiple="False"
        open="False"
        disabled="False"
        readonly="False"
        required="False"
        invalid="False"
        clearable="False"
        auto_highlight="False"
        filter="True"
        path=""
        loop="True"
        size="lg"
        variant="outline"
        side="bottom"
        align="start"
        offset="0"
        gap="4"
        icon=""
        icon_trailing="chevron__down"
        icon_variant="outline"
        input_class=""
        listbox_class=""
        chip_class=""
        form=""
        label=""
        description=""
        description_trailing=""
        error=""
        badge=""
        class="" />
{% ui_class "ui.combobox" "root" class=class as root_class %}
{% ui_class "ui.combobox" "control" size=size variant=variant as control_class %}
{% ui_class "ui.combobox" "chips" as chips_class %}
{% ui_class "ui.combobox" "input" class=input_class as input_class_resolved %}
{% ui_class "ui.combobox" "icon" position="leading" as leading_icon_class %}
{% ui_class "ui.combobox" "icon" position="trailing" as trailing_icon_class %}
{% ui_class "ui.combobox" "clear" as clear_class %}
{% ui_class "ui.combobox" "listbox" class=listbox_class as listbox_class_resolved %}
<div x-data="UiCombobox"
     x-bind="root"
     data-ui-combobox
     data-state="closed"
     data-name="{{ name }}"
     data-value="{{ value }}"
     data-values="{{ values }}"
     data-placeholder="{{ placeholder }}"
     data-multiple="{{ multiple }}"
     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 %}
     {% if clearable|ui_bool %}data-clearable="true"{% endif %}
     {% if auto_highlight|ui_bool %}data-auto-highlight="true"{% endif %}
     data-filter="{{ filter }}"
     data-path="{{ path }}"
     data-loop="{{ loop }}"
     data-size="{{ size }}"
     data-variant="{{ variant }}"
     data-side="{{ side }}"
     data-align="{{ align }}"
     data-offset="{{ offset }}"
     data-gap="{{ gap }}"
     data-icon="{{ icon }}"
     data-icon-trailing="{{ icon_trailing }}"
     data-icon-variant="{{ icon_variant }}"
     data-input-class="{{ input_class }}"
     data-listbox-class="{{ listbox_class }}"
     data-chip-class="{{ chip_class }}"
     data-form="{{ form }}"
     data-class="{{ class }}"
     class="{{ root_class }}"
     {{ attrs }}>
    <div data-ui-control
         data-ui-combobox-control
         data-state="closed"
         data-variant="{{ variant }}"
         {% 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-combobox-icon="leading"
                         data-icon="{{ icon }}"
                         data-icon-variant="{{ icon_variant }}"
                         aria-hidden="true" />
        {% endif %}
        <div data-ui-combobox-chips class="{{ chips_class }}" hidden></div>
        <input type="text"
               data-ui-combobox-input
               class="{{ input_class_resolved }}"
               placeholder="{{ placeholder }}"
               {% if disabled|ui_bool %}disabled{% endif %}
               {% if readonly|ui_bool %}readonly{% endif %}
               {% if required|ui_bool and not multiple|ui_bool %}required{% 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">
        {% if clearable|ui_bool %}
            <button type="button"
                    data-ui-combobox-clear
                    class="{{ clear_class }}"
                    aria-label="Clear selection">
                <c-component is="icons.close" class="size-icon-xs fill-current" aria-hidden="true" />
            </button>
        {% endif %}
        {% if icon_trailing %}
            <button type="button"
                    data-ui-combobox-toggle
                    class="{{ clear_class }}"
                    aria-label="Toggle options">
                <c-component is="icons.{{ icon_trailing }}"
                             class="{{ trailing_icon_class }}"
                             data-ui-combobox-icon="trailing"
                             data-icon="{{ icon_trailing }}"
                             data-icon-variant="{{ icon_variant }}"
                             aria-hidden="true" />
            </button>
        {% endif %}
    </div>
    <div data-ui-combobox-hidden-inputs></div>
    <template data-ui-combobox-chip-remove-icon>
        <c-component is="icons.close" class="size-icon-xs fill-current" aria-hidden="true" />
    </template>
    <div data-ui-combobox-listbox
         data-state="closed"
         role="listbox"
         tabindex="-1"
         popover="manual"
         hidden
         class="{{ listbox_class_resolved }}">{{ slot }}</div>
</div>