<!-- Semmet Angular: Avatar — https://www.w3.org/WAI/tutorials/images/ -->
<!--
Usage from a parent component template:
Import <%= classify(name) %> in that parent component.

<<%= selector %> name="Ada Lovelace" src="/assets/ada.jpg" />
<<%= selector %> name="Grace Hopper" />

<<%= selector %> name="Katherine Johnson">
  <ng-template <%= camelize(name) %>Fallback>
    KJ
  </ng-template>
</<%= selector %>>
-->
<span
  [class]="avatarClasses()"
  [attr.role]="src() ? null : 'img'"
  [attr.aria-label]="src() ? null : accessibleLabel()"
  [attr.aria-hidden]="ariaHidden()"
>
  @if (src()) {
    <img class="<%= dasherize(name) %>__image" [src]="src()" [alt]="altText()" />
  } @else if (fallback(); as fallbackSlot) {
    <ng-container [ngTemplateOutlet]="fallbackSlot.templateRef" />
  } @else {
    <span class="<%= dasherize(name) %>__initials" aria-hidden="true">{{ initials() }}</span>
  }
</span>
