@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() }"  />

  <!-- @if (displayWatchLaterPlaylist()) {
    <div 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>
  }

  @if (playOverlay()) {
    <div class="play-overlay">
      <div class="icon"></div>
    </div>
  }

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