<ng-container *transloco="let t; prefix: 'series-detail'">

  @let releaseYearValue = releaseYear();
  @let bytesValue = totalBytes();
  @let readingTimeEntityValue = readingTimeEntity();
  @let libraryTypeValue = libraryType();
  @let mangaFormatValue = mangaFormat();
  @let readingTimeLeftValue = readingTimeLeft();
  @let entityValue = entity();


  <div class="mt-2 mb-2">
    @if (entityValue.publishers.length > 0) {
      <div class="publisher-img-container d-inline-flex align-items-center me-2 position-relative">
        <app-image [imageUrl]="imageService.getPublisherImage(entityValue.publishers[0].name)" [classes]="'me-2'" [hideOnError]="true" width="32px" height="32px"
                  aria-hidden="true" />
        <div class="position-relative d-inline-block" (click)="openGeneric(FilterField.Publisher, entityValue.publishers[0].id)">{{entityValue.publishers[0].name}}</div>
<!--        <app-publisher-flipper [publishers]="entityValue.publishers"></app-publisher-flipper>-->
      </div>
    }
    <span class="me-2">
      <app-age-rating-image [rating]="ageRating()" />
    </span>

    <span class="me-2">
       <app-series-format [format]="mangaFormatValue" [useTitle]="false" />
    </span>


    @if ((libraryTypeValue === LibraryType.Book || libraryTypeValue === LibraryType.LightNovel) && mangaFormatValue !== MangaFormat.PDF) {
      <span class="small-text me-3">{{t('words-count', {num: readingTimeEntityValue.wordCount | compactNumber})}}</span>
    } @else {
      <span class="small-text me-3">{{t('pages-count', {num: readingTimeEntityValue.pages | compactNumber})}}</span>
    }

    @if (hasReadingProgress() && readingTimeLeftValue && readingTimeLeftValue.avgHours !== 0) {
      <span class="small-text" [ngbTooltip]="t('time-left-alt')">
        <i class="fa-solid fa-clock" aria-hidden="true"></i>
        {{readingTimeLeftValue | readTimeLeft }}
      </span>
    } @else {
      <span class="small-text" [ngbTooltip]="t('time-to-read-alt')">
        <i class="fa-regular fa-clock" aria-hidden="true"></i>
        {{readingTimeEntityValue | readTime }}
      </span>
    }


    @if (releaseYearValue) {
      <span class="small-text ms-3">
        <i class="fas fa-calendar" aria-hidden="true"></i>
        {{releaseYearValue}}
      </span>
    }

    @if (bytesValue && hasDownloadRole()) {
      <span class="small-text ms-3">
        <i class="fas fa-database" aria-hidden="true"></i>
        {{bytesValue| bytes}}
      </span>
    }

    @if (totalReads() > 0) {
      <span class="small-text ms-3" [ngbTooltip]="t('read-count-tooltip')">
        <i class="fas fa-eye" aria-hidden="true"></i>
        {{totalReads() | compactNumber}}
      </span>
    }

  </div>
</ng-container>
