<div class="root" [ngClass]="{ 'small': size() === 'small' }">

  <my-video-thumbnail
    *ngIf="thumbnail()" blur="false"
    [video]="video()" [videoRouterLink]="getVideoUrl()" [ariaLabel]="video().name" playOverlay="false"
  ></my-video-thumbnail>

  <div *ngIf="title()" class="min-width-0" [ngClass]="{ ellipsis: ellipsis }">
    <div class="d-flex flex-wrap gap-2 align-items-center">
      <a class="name" [ngClass]="{ ellipsis: ellipsis }" [routerLink]="getVideoUrl()" [title]="video().name">
        {{ video().name }}
      </a>

      <ng-content></ng-content>
    </div>

    <a *ngIf="video().channel" [routerLink]="getChannelUrl()" class="channel" [ngClass]="{ ellipsis: ellipsis }">
      {{ video().channel?.displayName }}

      <ng-container *ngIf="hostInfo()" i18n>
        on {{ video().channel?.host }}
      </ng-container>
    </a>
  </div>

</div>
