@if (videoHref()) {
  <a [ariaLabel]="ariaLabel()" [href]="videoHref()" [target]="videoTarget()" class="video-thumbnail" tabindex="-1">
    <ng-container *ngTemplateOutlet="aContent"></ng-container>
  </a>
} @else {
  <a [ariaLabel]="ariaLabel()" [routerLink]="getVideoRouterLink()" [queryParams]="queryParams()" class="video-thumbnail" tabindex="-1">
    <ng-container *ngTemplateOutlet="aContent"></ng-container>
  </a>
}

<ng-template #aContent>
  <img alt="" [attr.src]="getImageUrl()" [ngClass]="{ 'blur-filter': blur() }"  />

  <div *ngIf="displayWatchLaterPlaylist()" class="actions-overlay">
    <button
      class="watch-icon-overlay button-unstyle"
      placement="left" [ngbTooltip]="getWatchIconText()" container="body" #watchLaterTooltip="ngbTooltip"
      (click)="onWatchLaterClick($event)" [attr.aria-label]="inWatchLaterPlaylist() ? removeFromWatchLaterText : addToWatchLaterText"
    >
      @if (inWatchLaterPlaylist()) {
        <my-global-icon iconName="tick"></my-global-icon>
      } @else {
        <my-global-icon iconName="clock"></my-global-icon>
      }
    </button>
  </div>

  <div class="label-overlay pt-badge badge-warning"><ng-content select="label-warning"></ng-content></div>
  <div class="label-overlay pt-badge badge-danger"><ng-content select="label-danger"></ng-content></div>

  @if (video().isLive) {
    <div  class="live-overlay" [ngClass]="{ 'live-streaming': isLiveStreaming(), 'ended-live': isEndedLive() }">
      @if (isLiveStreaming()) {
        <ng-container i18n>LIVE</ng-container>
      } @else if (isEndedLive()) {
        <ng-container i18n>LIVE ENDED</ng-container>
      } @else if (isScheduledLive()) {
        <ng-container i18n>SCHEDULED LIVE</ng-container>
        <span [title]="scheduledLiveDate().toLocaleString()"> {{ scheduledLiveDate() | myFromNow | uppercase }}</span>
      } @else {
        <ng-container i18n>WAIT LIVE</ng-container>
      }
    </div>
  } @else if (getDurationLabel()) {
    <div class="duration-overlay" [ariaLabel]="getDurationOverlayLabel()">{{ getDurationLabel() }}</div>
  }

  <div *ngIf="playOverlay()" class="play-overlay">
    <div class="icon"></div>
  </div>

  <div class="progress-bar" *ngIf="!video().isLive && video().userHistory?.currentTime">
    <div [ngStyle]="{ 'width.%': getProgressPercent() }">
      <span class="visually-hidden" i18n>You watched {{ getProgressPercent() }}% of this video</span>
    </div>
  </div>
</ng-template>
