<div class="book-card"
     [class.selected]="isSelected"
     (mouseover)="isHovered = true"
     (mouseout)="isHovered = false"
     (click)="onCardClick($event)">

  <div class="cover-container" [ngClass]="{ 'shimmer': !isImageLoaded, 'center-info-btn': isSeriesViewActive() }">
    <div
      class="cover-container"
      [ngClass]="{
        'center-info-btn': isSeriesViewActive(),
        'loaded': isImageLoaded
      }">
      <img
        [src]="urlHelper.getThumbnailUrl(book.id, book.metadata?.coverUpdatedOn)"
        class="book-cover"
        [class.loaded]="isImageLoaded"
        alt="Cover of {{ displayTitle }}"
        loading="lazy"
        (load)="onImageLoad()"/>
    </div>

    @if (!book.seriesCount && book.metadata?.seriesNumber != null) {
      <div class="series-number-overlay">
        #{{ book.metadata?.seriesNumber }}
      </div>
    }

    @if (book.seriesCount && book.seriesCount! >= 1) {
      <div class="series-items-count-overlay">
        {{ book.seriesCount }}
      </div>
    }

    @if (isSeriesViewActive()) {
      <p-button [rounded]="true" icon="pi pi-info" class="info-btn" (click)="openSeriesInfo()"></p-button>
    } @else {
      <p-button [rounded]="true" icon="pi pi-info" class="info-btn" (click)="openBookInfo(book)"></p-button>
    }

    <p-button [hidden]="isSeriesViewActive()" [rounded]="true" icon="pi pi-book" class="read-btn" (click)="readBook(book)"></p-button>

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

    @if (progressPercentage !== null) {
      <p-progressBar
        [value]="progressPercentage"
        [showValue]="false"
        class="cover-progress-bar"
        [ngClass]="{ 'progress-complete': progressPercentage === 100, 'progress-incomplete': progressPercentage < 100 }">
      </p-progressBar>
    }
    @if (koProgressPercentage !== null) {
      <p-progressBar
        [value]="koProgressPercentage"
        [showValue]="false"
        [ngClass]="[
          progressPercentage == null ? 'cover-progress-bar-ko-only' : 'cover-progress-bar-ko-both',
          koProgressPercentage === 100 ? 'progress-complete-ko' : 'progress-incomplete-ko'
        ]">
      </p-progressBar>
    }
  </div>

  <div [hidden]="bottomBarHidden">
    <div class="book-title-container flex items-center">
      @if (shouldShowStatusIcon()) {
        <div class="read-status-indicator"
             [ngClass]="getReadStatusClass()"
             [pTooltip]="'Status: ' + getReadStatusTooltip()"
             tooltipPosition="bottom">
          <i [class]="getReadStatusIcon()" style="font-size: 0.9rem"></i>
        </div>
      }
      <h4 class="book-title m-0 pl-2"
          tooltipPosition="bottom"
          [pTooltip]="'Title: ' + displayTitle">
        {{ displayTitle }}
      </h4>
      <p-tieredmenu #menu [model]="items" [popup]="true" appendTo="body"></p-tieredmenu>
      <p-button
        class="custom-button-padding"
        size="small"
        [text]="true"
        (click)="onMenuToggle($event, menu)"
        icon="pi pi-ellipsis-v">
      </p-button>
    </div>
  </div>
</div>
