<ng-container *transloco="let t; prefix: 'external-series-card'">
  @let externalSeries = data();
  @if (externalSeries) {
    <div class="card-item-container card clickable position-relative">
      <div class="overlay" (click)="handleClick()">
        <ng-container>
          <app-image [styles]="{'border-radius': '.25rem .25rem 0 0'}" height="232.91px" width="160px" [imageUrl]="externalSeries.coverUrl" />
        </ng-container>


        <ng-container>
          <div class="badge-container">
            <div class="not-read-badge" ></div>
          </div>
        </ng-container>

        <div class="card-overlay"></div>

      </div>

      <div class="card-title-container">
        @if (externalSeries.name.length > 0) {
          <img class="me-1" [ngSrc]="externalSeries.provider | providerImage" width="20" height="20" alt="">
          <a #link class="card-title" [href]="externalSeries.url" target="_blank" rel="noreferrer nofollow">
            <span class="card-title" placement="top" id="{{externalSeries.name}}" [ngbTooltip]="externalSeries.name" (click)="handleClick()" tabindex="0">
              {{externalSeries.name}}
            </span>
          </a>

        }
        <span class="card-actions">
        </span>
      </div>

    </div>
  }
</ng-container>
