<div class="series-card" (click)="onCardClick($event)">
  <div class="stacked-covers" [ngClass]="'covers-' + series.coverBooks.length">
    @for (book of series.coverBooks; track book.id; let i = $index) {
      <img
        [src]="getCoverUrl(i)"
        class="cover-img"
        [ngClass]="'cover-' + i"
        [alt]="series.seriesName"
        loading="lazy"
        decoding="async"/>
    }
  </div>

  <div class="card-body">
    <h4 class="series-name" [pTooltip]="series.seriesName" tooltipPosition="bottom">
      {{ series.seriesName }}
    </h4>

    <p class="series-authors" [pTooltip]="series.authors.join(', ')" tooltipPosition="bottom">
      {{ authorsDisplay }}
    </p>

    <div class="progress-section">
      <p-progressBar
        [value]="progressPercent"
        [showValue]="false"
        class="series-progress-bar"
        [ngClass]="progressPercent === 100 ? 'progress-complete' : 'progress-incomplete'">
      </p-progressBar>
      <span class="progress-label">{{ series.readCount }}/{{ series.bookCount }}</span>
    </div>

    @if (series.nextUnread) {
      <div class="card-actions">
        <p-button
          size="small"
          icon="pi pi-book"
          [label]="'seriesBrowser.readNext' | transloco"
          [pTooltip]="series.nextUnread.metadata?.title || ''"
          tooltipPosition="bottom"
          severity="info"
          [text]="true"
          (click)="readNext($event)">
        </p-button>
      </div>
    }
  </div>
</div>
