{% load ui_classes ui_props %}

<c-vars value=""
        disabled="False"
        selected="False"
        item=""
        icon=""
        icon_trailing=""
        icon_variant="outline"
        suffix=""
        class="" />
{% ui_class "ui.combobox" "option" class=class as option_class %}
{% ui_class "ui.combobox" "optionIcon" position="leading" as leading_icon_class %}
{% ui_class "ui.combobox" "optionIcon" position="trailing" as trailing_icon_class %}
{% ui_class "ui.combobox" "optionLabel" as label_class %}
{% ui_class "ui.combobox" "optionMeta" as meta_class %}
{% ui_class "ui.combobox" "optionIndicator" as indicator_class %}
<div role="option"
     data-ui-combobox-option
     data-ui-interactive
     data-value="{{ value }}"
     data-item="{{ item }}"
     data-suffix="{{ suffix }}"
     {% if disabled|ui_bool %}data-disabled="true" aria-disabled="true"{% endif %}
     {% if selected|ui_bool %}data-selected="true" aria-selected="true"{% else %}aria-selected="false"{% endif %}
     data-icon="{{ icon }}"
     data-icon-trailing="{{ icon_trailing }}"
     data-icon-variant="{{ icon_variant }}"
     data-class="{{ class }}"
     class="{{ option_class }}"
     {{ attrs }}>
    {% if icon %}
        <c-component is="icons.{{ icon }}"
                     class="{{ leading_icon_class }}"
                     data-ui-combobox-option-icon
                     data-icon="{{ icon }}"
                     data-icon-variant="{{ icon_variant }}"
                     aria-hidden="true" />
    {% endif %}
    <c-ui.text as="span"
               size="sm"
               color="inherit"
               truncate="True"
               class="{{ label_class }}"
               data-ui-combobox-option-label>
        {{ slot }}
    </c-ui.text>
    {% if suffix %}
        <c-ui.text as="span"
                   size="xs"
                   color="inherit"
                   class="{{ meta_class }}"
                   data-ui-combobox-option-meta>
            {{ suffix }}
        </c-ui.text>
    {% endif %}
    {% if icon_trailing %}
        <c-component is="icons.{{ icon_trailing }}"
                     class="{{ trailing_icon_class }}"
                     data-ui-combobox-option-icon="trailing"
                     data-icon="{{ icon_trailing }}"
                     data-icon-variant="{{ icon_variant }}"
                     aria-hidden="true" />
    {% endif %}
    <c-component is="icons.checkmark"
                 class="{{ indicator_class }}"
                 data-ui-combobox-option-indicator
                 {% if selected|ui_bool %}data-selected="true"{% endif %}
                 aria-hidden="true" />
</div>