{% load ui_classes ui_props %}

<c-vars as="a"
        variant="ghost"
        color="neutral"
        href=""
        current="False"
        disabled="False"
        icon=""
        icon_trailing=""
        badge=""
        class="" />
{% if actions %}
    {% ui_class "ui.sidebar" "item" variant=variant color=color withActions=True class=class as item_class %}
{% else %}
    {% ui_class "ui.sidebar" "item" variant=variant color=color withActions=False class=class as item_class %}
{% endif %}
{% ui_class "ui.sidebar" "itemRow" as item_row_class %}
{% ui_class "ui.sidebar" "itemIcon" position="leading" as leading_icon_class %}
{% ui_class "ui.sidebar" "itemIcon" position="trailing" as trailing_icon_class %}
{% ui_class "ui.sidebar" "itemLabel" as label_class %}
{% ui_class "ui.sidebar" "itemBadge" as badge_class %}
{% ui_class "ui.sidebar" "itemActions" as actions_class %}

{% partialdef item_control %}
    {% if href and as != "button" %}
        <a href="{{ href }}"
           data-ui-sidebar-item
           data-ui-interactive
           data-variant="{{ variant }}"
           data-color="{{ color }}"
           {% if current|ui_bool %}data-current aria-current="page"{% endif %}
           {% if disabled|ui_bool %}data-disabled aria-disabled="true" tabindex="-1"{% endif %}
           class="{{ item_class }}"
           {{ attrs }}>
            {% if icon %}
                <c-component is="icons.{{ icon }}"
                             class="{{ leading_icon_class }}"
                             data-ui-sidebar-item-icon
                             data-icon="{{ icon }}"
                             aria-hidden="true" />
            {% endif %}
            <c-ui.text as="span"
                       size="sm"
                       weight="medium"
                       color="inherit"
                       truncate
                       class="{{ label_class }}"
                       data-ui-sidebar-item-label>
                {{ slot }}
            </c-ui.text>
            {% if badge %}
                <span class="{{ badge_class }}" data-ui-sidebar-item-badge>{{ badge }}</span>
            {% endif %}
            {% if icon_trailing %}
                <c-component is="icons.{{ icon_trailing }}"
                             class="{{ trailing_icon_class }}"
                             data-ui-sidebar-item-icon="trailing"
                             data-icon="{{ icon_trailing }}"
                             aria-hidden="true" />
            {% endif %}
        </a>
    {% else %}
        <button type="button"
                data-ui-sidebar-item
                data-ui-interactive
                data-variant="{{ variant }}"
                data-color="{{ color }}"
                {% if current|ui_bool %}data-current aria-current="page"{% endif %}
                {% if disabled|ui_bool %}data-disabled aria-disabled="true" disabled{% endif %}
                class="{{ item_class }}"
                {{ attrs }}>
            {% if icon %}
                <c-component is="icons.{{ icon }}"
                             class="{{ leading_icon_class }}"
                             data-ui-sidebar-item-icon
                             data-icon="{{ icon }}"
                             aria-hidden="true" />
            {% endif %}
            <c-ui.text as="span"
                       size="sm"
                       weight="medium"
                       color="inherit"
                       truncate
                       class="{{ label_class }}"
                       data-ui-sidebar-item-label>
                {{ slot }}
            </c-ui.text>
            {% if badge %}<span class="{{ badge_class }}" data-ui-sidebar-item-badge>{{ badge }}</span>{% endif %}
            {% if icon_trailing %}
                <c-component is="icons.{{ icon_trailing }}"
                             class="{{ trailing_icon_class }}"
                             data-ui-sidebar-item-icon="trailing"
                             data-icon="{{ icon_trailing }}"
                             aria-hidden="true" />
            {% endif %}
        </button>
    {% endif %}
{% endpartialdef %}

{% if actions %}
    <div class="{{ item_row_class }}" data-ui-sidebar-item-row>
        {% partial item_control %}
        <div class="{{ actions_class }}" data-ui-sidebar-item-actions>{{ actions }}</div>
    </div>
{% else %}
    {% partial item_control %}
{% endif %}