{% load ui_classes ui_props %}

<c-vars variant="soft"
        color="neutral"
        size="sm"
        rounded="False"
        href=""
        as="span"
        type="button"
        disabled="False"
        icon=""
        icon_trailing=""
        icon_variant="mini"
        inset=""
        class=""
        :label_sizes="{ 'xs': 'xs', 'sm': 'xs', 'md': 'sm', 'lg': 'sm', 'xlg': 'sm' }" />
{% ui_class "ui.badge" "root" variant=variant color=color size=size rounded=rounded insetLeft=inset|ui_inset:"left" insetRight=inset|ui_inset:"right" insetTop=inset|ui_inset:"top" insetBottom=inset|ui_inset:"bottom" class=class as root_class %}
{% ui_class "ui.badge" "icon" size=size position="leading" as leading_icon_class %}
{% ui_class "ui.badge" "icon" size=size position="trailing" as trailing_icon_class %}
{% ui_class "ui.badge" "label" as label_class %}

{% partialdef badge_content %}
    {% if icon %}
        <c-component is="icons.{{ icon }}"
                     class="{{ leading_icon_class }}"
                     data-ui-badge-icon
                     data-icon="{{ icon }}"
                     data-icon-variant="{{ icon_variant }}"
                     aria-hidden="true" />
    {% endif %}
    {% if slot %}
        <c-ui.text as="span"
                   size="{{ label_sizes|get_item:size }}"
                   color="inherit"
                   weight="medium"
                   truncate="True"
                   class="{{ label_class }}"
                   data-ui-badge-label>
            {{ slot }}
        </c-ui.text>
    {% endif %}
    {% if icon_trailing %}
        <c-component is="icons.{{ icon_trailing }}"
                     class="{{ trailing_icon_class }}"
                     data-ui-badge-icon="trailing"
                     data-icon="{{ icon_trailing }}"
                     data-icon-variant="{{ icon_variant }}"
                     aria-hidden="true" />
    {% endif %}
{% endpartialdef %}

{% if href %}
    <a href="{{ href }}"
       data-ui-badge
       data-variant="{{ variant }}"
       data-color="{{ color }}"
       data-size="{{ size }}"
       {% if rounded|ui_bool %}data-rounded="true"{% endif %}
       {% if disabled|ui_bool %}aria-disabled="true" tabindex="-1" data-disabled="true"{% endif %}
       class="{{ root_class }}"
       {{ attrs }}>
        {% partial badge_content %}
    </a>
{% elif as == "button" %}
    <button type="{{ type }}"
            data-ui-badge
            data-variant="{{ variant }}"
            data-color="{{ color }}"
            data-size="{{ size }}"
            {% if rounded|ui_bool %}data-rounded="true"{% endif %}
            {% if disabled|ui_bool %}disabled aria-disabled="true" data-disabled="true"{% endif %}
            class="{{ root_class }}"
            {{ attrs }}>
        {% partial badge_content %}
    </button>
{% else %}
    <span data-ui-badge
          data-variant="{{ variant }}"
          data-color="{{ color }}"
          data-size="{{ size }}"
          {% if rounded|ui_bool %}data-rounded="true"{% endif %}
          {% if disabled|ui_bool %}data-disabled="true"{% endif %}
          class="{{ root_class }}"
          {{ attrs }}>
        {% partial badge_content %}
    </span>
{% endif %}