<ng-container *transloco="let t; read: 'external-series-card'">
  <ng-container *ngIf="data !== undefined">
    <div class="card">
      <div class="overlay" (click)="handleClick()">
        <ng-container>
          <app-image borderRadius=".25rem .25rem 0 0" height="230px" width="158px" [imageUrl]="data.coverUrl"></app-image>
        </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-body" *ngIf="data.name.length > 0">
        <div>
        <span class="card-title" placement="top" id="{{data.name}}" [ngbTooltip]="data.name" (click)="handleClick()" tabindex="0">
          {{data.name}}
        </span>
          <span class="card-actions float-end">
          <i class="fa fa-external-link-alt" aria-hidden="true"></i>
        </span>
        </div>
        <a #link class="card-title library" [href]="data.url" target="_blank" rel="noreferrer nofollow">{{t('open-external')}}</a>
      </div>
    </div>

  </ng-container>

</ng-container>
