<div class="relative inline-block">
  @if (avatarUrl()) {
    <img
      [src]="avatarUrl()!"
      [width]="sizePx()"
      [height]="sizePx()"
      alt=""
      decoding="async"
      loading="lazy"
      class="rounded-full object-cover"
      [class]="sizeClasses() + ' ' + ringClass()"
    />
  } @else {
    <div
      class="rounded-full bg-primary/20 flex items-center justify-center text-primary font-medium"
      [class]="sizeClasses() + ' ' + textClass() + ' ' + ringClass()"
    >
      {{ initial() }}
    </div>
  }
  @if (showStatusBadge()) {
    <span
      class="absolute -bottom-0.5 -right-0.5 rounded-full border-2 border-card"
      [class]="statusBadgeSizeClass() + ' ' + statusBadgeColor()"
    ></span>
  }
</div>
