{# @description daisyUI's avatar: a photo, initials, or a silhouette when neither is given, with an optional online or offline indicator. Give alt when the avatar is the only thing identifying the person — beside a name it is usually noise. Width, shape and placeholder colour go through content_class, not a size or variant attribute. #}
{# @prop src:text | description:"URL of a profile photo. Falls back to placeholder text, then to a silhouette. This package resolves no URL itself; pass the resolved URL in." #}
{# @prop alt:text | description:"Alt text of the photo. Leave empty unless the avatar is the only thing identifying the person." #}
{# @prop placeholder:text | description:"Initials or short text shown when there is no src." #}
{# @prop online:boolean | description:"Presence indicator: avatar-online." #}
{# @prop offline:boolean | description:"Presence indicator: avatar-offline." #}
{# @prop content_class:text | description:"Extra classes for the image frame, replacing the w-12 rounded-full default (plus bg-neutral text-neutral-content with no src) entirely. Sets the avatar's width and shape." #}
{# @prop class:text | description:"Extra classes added to the avatar." #}
<c-vars src="" alt="" placeholder="" online="" offline="" content_class="" class="" />
<div class="avatar{% if not src %} avatar-placeholder{% endif %}{% if online %} avatar-online{% endif %}{% if offline %} avatar-offline{% endif %} {{ class }}"
     {{ attrs }}>
  <div class="{% if content_class %}{{ content_class }}{% else %}w-12 rounded-full{% if not src %} bg-neutral text-neutral-content{% endif %}{% 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"
           viewBox="0 0 16 16"
           aria-hidden="true"
           focusable="false">
        <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>