<div class="author-card" [class.selected]="isSelected" (click)="onCardClick($event)">
  <div class="cover-container" [ngClass]="{'loaded': isImageLoaded}">
    @if (hasPhoto) {
      <img
        [src]="thumbnailUrl"
        class="author-photo"
        [class.loaded]="isImageLoaded"
        [alt]="author.name"
        loading="lazy"
        decoding="async"
        (load)="onImageLoad()"
        (error)="onPhotoError()"/>
    } @else {
      <div class="author-photo-placeholder">
        <i class="pi pi-user"></i>
      </div>
    }

    <span class="book-count-badge">{{ author.bookCount }}</span>

    @if (isCheckboxEnabled) {
      <p-checkbox
        [binary]="true"
        class="select-checkbox"
        (click)="captureMouseEvent($event)"
        [ngModel]="isSelected"
        (onChange)="toggleSelection($event)">
      </p-checkbox>
    }

    <div class="card-overlay">
      @if (isMatched) {
        <i class="pi pi-check-circle matched-icon" [pTooltip]="'authorBrowser.card.matched' | transloco" tooltipPosition="top"></i>
      }
      <h4 class="author-name" [pTooltip]="author.name" tooltipPosition="bottom">{{ author.name }}</h4>
      <div class="menu-button-container">
        <p-tieredmenu #menu [model]="items" [popup]="true" appendTo="body" (onShow)="onMenuShow()" (onHide)="onMenuHide()"></p-tieredmenu>
        <p-button
          class="card-menu-btn"
          size="small"
          [text]="true"
          (click)="onMenuToggle($event, menu)"
          icon="pi pi-ellipsis-v">
        </p-button>
      </div>
    </div>
  </div>
</div>
