{% set size_map = {
    'xs': '24px',
    'sm': '32px',
    'md': '48px',
    'lg': '64px',
    'xl': '96px'
} %}
{% set size_px = size_map.get(size, '48px') %}

<div id="{{ id }}" class="position-relative d-inline-block">
    {% if image_url %}
    <img src="{{ image_url }}" alt="{{ alt }}" class="{% if rounded %}rounded-circle{% else %}rounded{% endif %}{% if border %} border border-2{% endif %}" style="width: {{ size_px }}; height: {{ size_px }}; object-fit: cover;">
    {% else %}
    <div class="{% if rounded %}rounded-circle{% else %}rounded{% endif %}{% if border %} border border-2{% endif %} bg-{{ variant }} bg-opacity-10 text-{{ variant }} d-flex align-items-center justify-content-center fw-semibold" style="width: {{ size_px }}; height: {{ size_px }};">
        {{ initials|upper if initials else '?' }}
    </div>
    {% endif %}

    {% if status %}
    <span class="position-absolute bottom-0 end-0 translate-middle p-1 bg-{{ 'success' if status == 'online' else 'secondary' if status == 'offline' else 'warning' if status == 'away' else 'danger' }} border border-light rounded-circle">
        <span class="visually-hidden">{{ status }}</span>
    </span>
    {% endif %}
</div>