<ng-container *transloco="let t; prefix: 'series-detail'">
    @if(mobileSeriesImgBackground === 'true') {
      <app-image [styles]="{'background': 'none'}" [imageUrl]="coverImage()" />
    } @else {
      <app-image [styles]="{'object-fit': 'contain', 'background': 'none', 'max-height': '400px'}"  [imageUrl]="coverImage()" />
    }
    <div class="card-overlay"></div>
    <div class="overlay-information">
      <div class="overlay-information--centered">
          <span class="card-title library mx-auto" style="width: auto;" (click)="read.emit(undefined)">
            <div>
              <i class="fa-solid fa-book text-center" aria-hidden="true"></i>
            </div>
          </span>
      </div>
    </div>

  @let data = entity();
  @if (data.pagesRead < data.pages && data.pagesRead > 0) {
    <div class="progress-banner series" ngbTooltip="{{(data.pagesRead / data.pages) * 100 | number:'1.0-1'}}%">
      <ngb-progressbar type="primary" [value]="data.pagesRead" [max]="data.pages" [showValue]="true" />
    </div>
    @if (continueTitle() !== '') {
      <div class="under-image">
        <div class="continue-from">
          {{t('continue-from', {title: continueTitle()})}}
        </div>
      </div>
    }
  }
</ng-container>
