{# Django template for Avatar #}

{% load components %}

{% if tooltip %}
<span class="usx-tooltip">
{% endif %}

<a href="{{ href|default:'#' }}" class="usx-avatar{% if className %} {{ className }}{% endif %}"{% if variant != 'image' and alt %} aria-label="{{ alt }}"{% endif %}>
  {% if variant == 'initials' %}
    <span class="usx-avatar__content{% if shape == 'circle' %} usx-circle{% elif shape == 'rounded-sm' %} usx-rounded-sm{% elif shape == 'rounded-md' %} usx-rounded-md{% elif shape == 'rounded-lg' %} usx-rounded-lg{% elif shape == 'rounded-xl' %} usx-rounded-xl{% else %} usx-circle{% endif %}{% if contentClassName %} {{ contentClassName }}{% endif %}">{{ value }}</span>
  {% elif variant == 'icon' %}
    <span class="usx-avatar__content{% if shape == 'circle' %} usx-circle{% elif shape == 'rounded-sm' %} usx-rounded-sm{% elif shape == 'rounded-md' %} usx-rounded-md{% elif shape == 'rounded-lg' %} usx-rounded-lg{% elif shape == 'rounded-xl' %} usx-rounded-xl{% else %} usx-circle{% endif %}{% if contentClassName %} {{ contentClassName }}{% endif %}">{% icon name=value %}{% endicon %}</span>
  {% else %}
    <img
      class="usx-avatar__img{% if shape == 'circle' %} usx-circle{% elif shape == 'rounded-sm' %} usx-rounded-sm{% elif shape == 'rounded-md' %} usx-rounded-md{% elif shape == 'rounded-lg' %} usx-rounded-lg{% elif shape == 'rounded-xl' %} usx-rounded-xl{% endif %}{% if imageClassName %} {{ imageClassName }}{% endif %}"
      src="{{ src }}"
      alt="{{ alt }}"
      role="img"
    />
  {% endif %}
</a>

{% if tooltip %}
  <span class="usa-tooltip__body usa-tooltip__body--right" role="tooltip">{{ tooltip }}</span>
</span>
{% endif %}