{# @description A daisyUI avatar: photo, initials, or a silhouette placeholder. #}
{# @prop :for:text | description:"User to resolve an avatar_url lookup for, when src is unset. Defaults to request.user." #}
{# @prop src:text | description:"URL for a profile photo. Falls back to the avatar_url lookup, then a placeholder/SVG." #}
{# @prop alt:text | default:"User avatar" | description:"Alt text for the <img>." #}
{# @prop size:text | default:"md" | description:"xs, sm, md, lg, xl or xxl, or any Tailwind w-* class." #}
{# @prop shape:select['rounded','rounded-xl','rounded-full'] | default:"rounded-full" | description:"Corner rounding class." #}
{# @prop variant:select['primary','secondary','accent','neutral'] | default:"primary" | description:"Initials background colour. The bare silhouette fallback is always muted." #}
{# @prop status:select['online','offline'] | description:"Presence indicator. Unset shows none." #}
{# @prop placeholder:text | description:"Initials or text shown when there's no image." #}
{# @prop class:text | description:"Extra classes on the .avatar wrapper." #}
{# @prop :size_options:text | hidden | description:"Internal size-to-width-class lookup table, not a caller-facing prop." #}
{% load mvp cotton %}
<c-vars :for="request.user"
        src
        alt="User avatar"
        size="md"
        :size_options="{'xs': 'w-6', 'sm': 'w-8', 'md': 'w-12', 'lg': 'w-16', 'xl': 'w-24', 'xxl': 'w-32'}"
        shape="rounded-full"
        variant="primary"
        status
        placeholder
        class />
{% if not src %}
  {% avatar_url for size as src %}
{% endif %}
<div class="avatar{% if not src %} avatar-placeholder{% endif %}{% if status %} avatar-{{ status }}{% endif %}{% if class %} {{ class }}{% endif %}"
     {{ attrs }}>
  <div class="{% firstof size_options|get_item:size size %} {{ shape }}{% if src %}{% elif placeholder %} bg-{{ variant }} text-{{ variant }}-content{% else %} bg-base-300 text-base-content/40{% endif %}">
    {% if src %}
      <img src="{{ src }}" alt="{{ alt }}" />
    {% elif placeholder %}
      <span>{{ placeholder }}</span>
    {% else %}
      <svg xmlns="http://www.w3.org/2000/svg"
           width="80%"
           height="80%"
           fill="currentColor"
           class="bi bi-person-fill"
           viewBox="0 0 16 16">
        <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6" />
      </svg>
    {% endif %}
  </div>
</div>