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

  @if (thumbnail()) {
    <my-video-thumbnail
      blur="false"
      [video]="video()" [videoRouterLink]="getVideoUrl()" [ariaLabel]="video().name" playOverlay="false"
    ></my-video-thumbnail>
  }

  @if (title()) {
    <div 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>

      @if (video().channel) {
        <a [routerLink]="getChannelUrl()" class="channel" [ngClass]="{ ellipsis: ellipsis }">
          <span>{{ video().channel?.displayName }}</span>

          @if (displayEditorInfo() && user.isCollaboratingToChannels()) {
            @if (user.isEditorOfChannel(video().channel)) {
              <my-collaborator-state class="ms-2" type="accepted" small="true"></my-collaborator-state>
            } @else if (user.isOwnerOfChannel(video().channel)) {
              <my-collaborator-state class="ms-2" type="owner" small="true"></my-collaborator-state>
            }
          }
        </a>
      }
    </div>
  }

</div>
