{% load ui_classes ui_props %}

<c-vars placeholder="Search..." icon="search" clearable="True" class="" />
{% ui_class "ui.select" "search" class=class as search_class %}
{% ui_class "ui.select" "searchInput" as search_input_class %}
{% ui_class "ui.select" "icon" position="leading" as icon_class %}
{% ui_class "ui.select" "action" as action_class %}
{% ui_class "ui.chrome" "iconXs" as chrome_icon_xs_class %}
<div data-ui-select-search class="{{ search_class }}" {{ attrs }}>
    {% if icon %}
        <c-component is="icons.{{ icon }}"
                     class="{{ icon_class }}"
                     data-ui-select-search-icon
                     aria-hidden="true" />
    {% endif %}
    <input type="text"
           data-ui-select-search-input
           class="{{ search_input_class }}"
           placeholder="{{ placeholder }}"
           autocomplete="off"
           aria-label="{{ placeholder }}">
    {% if clearable|ui_bool %}
        <button type="button"
                data-ui-select-search-clear
                class="{{ action_class }}"
                aria-label="Clear search"
                hidden>
            <c-component is="icons.close" class="{{ chrome_icon_xs_class }}" aria-hidden="true" />
        </button>
    {% endif %}
</div>