{# ============================================================ #}
{# <c-avatar> — universal avatar component                      #}
{#                                                              #}
{# Props:                                                       #}
{#   src    – URL for profile photo. Omit → shows SVG icon.    #}
{#   alt    – <img /> alt text (default: "User avatar")          #}
{#   size   – xs | sm | md | lg | xl | xxl  (default: md)      #}
{#   status – online | away | busy | "" (default: no badge)    #}
{#   class  – extra classes on the .avatar wrapper             #}
{#                                                              #}
{# Examples:                                                    #}
{#   <c-avatar src="{{ user.photo.url }}" alt="{{ user }}" />  #}
{#   <c-avatar size="sm" />                                     #}
{#   <c-avatar src="{{ user.photo.url }}" status="online" />   #}
{# ============================================================ #}
<c-vars src=""
        alt="User avatar"
        size="md"
        status=""
        class="" />
{% if status %}<span class="avatar-wrap">{% endif %}
  <span class="avatar avatar-{{ size }} {{ class }}"
        {% if not src %}aria-hidden="true"{% endif %}
        {{ attrs }}>
    {% if src %}
      <img class="avatar-img"
           src="{{ src }}"
           alt="{{ alt }}" />
    {% else %}
      <svg class="avatar-svg"
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 16 16"
           fill="currentColor"
           aria-hidden="true">
        <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0" />
        <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1" />
      </svg>
    {% endif %}
  </span>
  {% if status %}
    <span class="avatar-status {{ status }}"
          title="{{ status }}"></span></span>
  {% endif %}