{% load lb_tags %}
<c-vars
    class=""
    shape="badge"
    variant=""
    horizontal=""
    :badgeVariantClasses="{
        'neutral': 'badge-neutral',
        'primary': 'badge-primary',
        'secondary': 'badge-secondary',
        'accent': 'badge-accent',
        'info': 'badge-info',
        'success': 'badge-success',
        'warning': 'badge-warning',
        'error': 'badge-error'
    }"
    :statusVariantClasses="{
        'neutral': 'status-neutral',
        'primary': 'status-primary',
        'secondary': 'status-secondary',
        'accent': 'status-accent',
        'info': 'status-info',
        'success': 'status-success',
        'warning': 'status-warning',
        'error': 'status-error'
    }"
    :horizontalClasses="{
        'start': 'indicator-start',
        'center': 'indicator-center',
        'end': 'indicator-end'
    }"
    vertical=""
    :verticalClasses="{
        'top': 'indicator-top',
        'middle': 'indicator-middle',
        'bottom': 'indicator-bottom'
    }"
    size=""
    :badgeSizeClasses="{
        'xs': 'badge-xs',
        'sm': 'badge-sm',
        'md': 'badge-md',
        'lg': 'badge-lg',
        'xl': 'badge-xl'
    }"
    :statusSizeClasses="{
        'xs': 'status-xs',
        'sm': 'status-sm',
        'md': 'status-md',
        'lg': 'status-lg',
        'xl': 'status-xl'
    }"
/>
{% parse_icon attrs as i %}

<span class="indicator-item
        {% if shape == 'badge' %}
            badge
            {{ badgeVariantClasses|get_dict_item:variant }}
            {{ badgeSizeClasses|get_dict_item:size }}
        {% elif shape == 'status' %}
            status
            {{ statusVariantClasses|get_dict_item:variant }}
            {{ statusSizeClasses|get_dict_item:size }}
        {% endif %}
        {{ horizontalClasses|get_dict_item:horizontal }}
        {{ verticalClasses|get_dict_item:vertical }}
        {{ class }}"
    {{ attrs|strip_icon_attrs }}
>
    {% if i.name %}
        <c-component is="lbi" n="{{ i.name }}" w="1em" h="1em" :fill=i.fill class="{{ i.css_class }}" />
    {% endif %}
    {{ slot }}
</span>