<div class="book-cover-wrapper" [class.audiobook-only]="isAudiobookOnly()" (mouseenter)="isHovered = true" (mouseleave)="isHovered = false">
  <img
    [src]="getThumbnailUrl()"
    class="book-cover"
    alt="Cover of {{ book.metadata?.title }}"
    loading="lazy"/>
    
  @if (showSeriesNumber && !book.seriesCount && book.metadata?.seriesNumber != null) {
    <div class="series-number-overlay">
      #{{ book.metadata?.seriesNumber }}
    </div>
  }

  @if (!this.isActive) {
    <p-button
      icon="pi pi-info"
      class="info-btn"
      [rounded]="true"
      [pTooltip]="book.metadata?.title"
      tooltipPosition="top"
      [ngClass]="{ 'visible': isHovered }"
      (onClick)="openBookInfo(book)">
    </p-button>
  }
</div>
