{% load lb_tags %}
<c-vars
    class=""
    size="md"
    :sizeClasses="{
        'xs': 'w-8 text-xs',
        'sm': 'w-12 text-md',
        'md': 'w-16 text-lg',
        'lg': 'w-24 text-xl',
        'xl': 'w-32 text-2xl',
    }"
    rounded=""
    :roundedClasses="{
        'xs': 'rounded-xs',
        'sm': 'rounded-sm',
        'md': 'rounded-md',
        'lg': 'rounded-lg',
        'xl': 'rounded-xl',
        'full': 'rounded-full'
    }"
    mask=""
    :maskClasses="{
        'heart': 'mask mask-heart',
        'squircle': 'mask mask-squircle',
        'hexagon-2': 'mask mask-hexagon-2',
        'triangle': 'mask mask-triangle',
        'pentagon': 'mask mask-pentagon',
        'diamond': 'mask mask-diamond',
        'star': 'mask mask-star'
    }"
    status=""
    :statusClasses="{
        'online': 'avatar-online',
        'offline': 'avatar-offline'
    }"
    placeholder
    ring
    ringColor=""
    :ringColorClasses="{
        'primary': 'ring-primary ring-offset-base-100',
        'secondary': 'ring-secondary ring-offset-base-100',
        'accent': 'ring-accent ring-offset-base-100',
        'neutral': 'ring-neutral ring-offset-base-100',
        'info': 'ring-info ring-offset-base-100',
        'success': 'ring-success ring-offset-base-100',
        'warning': 'ring-warning ring-offset-base-100',
        'error': 'ring-error ring-offset-base-100'
    }"
    src=""
    alt="Avatar"
    initials=""
    bgColor="neutral"
    :bgColorClasses="{
        'neutral': 'bg-neutral text-neutral-content',
        'primary': 'bg-primary text-primary-content',
        'secondary': 'bg-secondary text-secondary-content',
        'accent': 'bg-accent text-accent-content',
        'info': 'bg-info text-info-content',
        'success': 'bg-success text-success-content',
        'warning': 'bg-warning text-warning-content',
        'error': 'bg-error text-error-content'
    }"
    icon=""
    iconFill
    iconClass=""
/>

<div
    class="avatar {{ statusClasses|get_dict_item:status }} {% if placeholder %}avatar-placeholder{% endif %} {{ class }}"
    {{ attrs }}
>
    {% if slot %}
        {{ slot }}
    {% else %}
        <div class="
            {{ sizeClasses|get_dict_item:size }}
            {{ roundedClasses|get_dict_item:rounded }}
            {{ bgColorClasses|get_dict_item:bgColor }}
            {{ maskClasses|get_dict_item:mask }}
            {% if ring %}ring-2 ring-offset-2 {{ ringColorClasses|get_dict_item:ringColor }}{% endif %}
        ">
            {% if src %}
                <img src="{{ src }}" alt="{{ alt }}" />
            {% elif placeholder %}
                {% if icon %}
                    <c-component is="lbi" n="{{ icon }}" w="1.5em" h="1.5em" :fill=iconFill :class=iconClass />
                {% elif initials %}
                    <span>{{ initials }}</span>
                {% else %}
                    <c-component is="lbi" n="rmx.user" w="1.5em" h="1.5em" :class=iconClass :fill=iconFill />
                {% endif %}
            {% endif %}
        </div>
    {% endif %}
</div>