{% load ui_classes ui_props %}
<c-vars as="a" variant="ghost" color="neutral" href="" current="False" disabled="False" icon="" actions_visibility="always" class="" />
{% ui_class "ui.sidebar" "item" variant=variant color=color class=class as item_class %}
{% ui_class "ui.sidebar" "itemRow" as item_row_class %}
{% ui_class "ui.sidebar" "row" as row_class %}
{% ui_class "ui.sidebar" "main" as main_class %}
{% ui_class "ui.sidebar" "leading" as leading_class %}
{% ui_class "ui.sidebar" "itemIcon" as icon_class %}
{% ui_class "ui.sidebar" "itemLabel" as label_class %}
{% ui_class "ui.sidebar" "trailing" as trailing_class %}
{% ui_class "ui.sidebar" "actions" as actions_class %}
<li class="{{ item_row_class }}" data-ui-sidebar-item-row>
    <div class="{{ row_class }}" data-ui-sidebar-row data-actions-visibility="{{ actions_visibility }}">
        {% if href and as != "button" %}
            <a href="{{ href }}"{% if disabled|ui_bool %} aria-disabled="true" tabindex="-1"{% endif %}
        {% else %}
            <button type="button"{% if disabled|ui_bool %} disabled{% endif %}
        {% endif %}
                data-ui-sidebar-item data-ui-sidebar-control data-ui-option-recipe data-variant="{{ variant }}" data-color="{{ color }}"
                {% if current|ui_bool %}data-current{% if href and as != "button" %} aria-current="page"{% endif %}{% endif %}
                {% if disabled|ui_bool %}data-disabled{% endif %} class="{{ item_class }}" {{ attrs }}>
            <span class="{{ main_class }}">
            <span class="{{ leading_class }}" data-ui-sidebar-leading {% if leading or icon %}data-filled{% endif %}>
                {% if leading %}{{ leading }}{% elif icon %}<c-component is="icons.{{ icon }}" class="{{ icon_class }}" data-ui-sidebar-item-icon data-icon="{{ icon }}" aria-hidden="true" />{% endif %}
            </span>
            <span class="{{ label_class }}" data-ui-sidebar-item-label>{{ slot }}</span>
            </span>
            {% if trailing %}<span class="{{ trailing_class }}" data-ui-sidebar-item-trailing data-ui-sidebar-trailing>{{ trailing }}</span>{% endif %}
        {% if href and as != "button" %}</a>{% else %}</button>{% endif %}
        {% if actions %}<div class="{{ actions_class }}" data-ui-sidebar-item-actions data-ui-sidebar-actions>{{ actions }}</div>{% endif %}
    </div>
</li>