{% load mvp %}
<c-vars name image_url size="md" class />
{% if image_url %}
  <img src="{{ image_url }}"
       alt="{{ name }}"
       class="avatar{% if size %} avatar-{{ size }}{% endif %}{% if class %} {{ class }}{% endif %}"
       data-fallback-initials="{{ name|generate_initials }}"
       data-fallback-color="{{ name|avatar_color }}"
       onerror="this.style.display='none'; const fallback = document.createElement('span'); fallback.className = 'avatar avatar-initials ' + this.dataset.fallbackColor + (this.className.includes('avatar-sm') ? ' avatar-sm' : this.className.includes('avatar-lg') ? ' avatar-lg' : ' avatar-md'); fallback.textContent = this.dataset.fallbackInitials; this.parentNode.insertBefore(fallback, this.nextSibling);" />
{% else %}
  <span class="avatar avatar-initials {{ name|avatar_color }}{% if size %} avatar-{{ size }}{% endif %}{% if class %} {{ class }}{% endif %}">
    {{ name|generate_initials }}
  </span>
{% endif %}