<div
  appThemeNode="dmConversationItem"
  class="group flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-2 text-left transition-colors hover:bg-secondary/60"
  [class.bg-primary/10]="isSelected()"
  [class.text-foreground]="isSelected()"
  [attr.aria-current]="isSelected() ? 'page' : null"
  (click)="openConversation()"
  (keydown.enter)="openConversation()"
  (keydown.space)="openConversation()"
  role="button"
  tabindex="0"
>
  <app-user-avatar
    [name]="peerName()"
    [avatarUrl]="peerAvatarUrl()"
    size="sm"
  />
  <div class="min-w-0 flex-1">
    <div class="flex items-center justify-between gap-2">
      <p class="truncate text-sm font-medium text-foreground">{{ peerName() }}</p>
      @if (conversation().unreadCount > 0) {
        <span class="rounded-full bg-amber-400 px-1.5 py-0.5 text-[10px] font-semibold text-black">
          {{ formatUnreadCount(conversation().unreadCount) }}
        </span>
      }
    </div>
    <p class="truncate text-xs text-muted-foreground">{{ lastMessagePreview() }}</p>
  </div>
  <button
    type="button"
    class="invisible grid h-7 w-7 shrink-0 place-items-center rounded-md text-muted-foreground opacity-0 transition hover:bg-emerald-500/10 hover:text-emerald-600 focus:visible focus:opacity-100 group-focus-within:visible group-focus-within:opacity-100 group-hover:visible group-hover:opacity-100 disabled:group-focus-within:opacity-30 disabled:group-hover:opacity-30"
    [disabled]="!canCall()"
    [attr.aria-label]="'Call ' + peerName()"
    [title]="'Call ' + peerName()"
    (click)="callConversationPeer($event)"
  >
    <ng-icon
      [name]="callIcon()"
      class="h-3.5 w-3.5"
    />
  </button>
  <button
    type="button"
    class="grid h-7 w-7 shrink-0 place-items-center rounded-md text-muted-foreground opacity-0 transition hover:bg-destructive/10 hover:text-destructive focus:opacity-100 group-hover:opacity-100"
    [attr.aria-label]="'Forget ' + peerName()"
    [title]="'Forget ' + peerName()"
    (click)="forgetConversation($event)"
  >
    <ng-icon
      name="lucideTrash2"
      class="h-3.5 w-3.5"
    />
  </button>
</div>
