<div class="channel-filters">
  <div class="channel-label" i18n>Per channel:</div>

  @for (channel of channels; track channel.id) {
    <my-channel-toggle [channel]="channel" [(ngModel)]="channel.selected" (ngModelChange)="table.onFilter()"></my-channel-toggle>
  }
</div>

<my-table
  #table
  key="MyVideosComponent"
  [defaultColumns]="columns"
  defaultSort="publishedAt"
  i18n-paginatorText
  paginatorText="videos per page"
  defaultRowsPerPage="5"
  [bulkActions]="bulkActions"
  [dataLoader]="dataLoader"
  [customParseQueryParams]="customParseQueryParams"
  [customUpdateUrl]="customUpdateUrl"
>

  <ng-template #totalTitle let-totalRecords>
    <ng-container i18n>{ totalRecords, plural, =0 {No videos} =1 {1 video} other {{{ totalRecords | myNumberFormatter }} videos}}</ng-container>
  </ng-template>

  <ng-template #captionRight>
    <div class="d-flex align-items-center">
      <label class="label-inline d-none d-inline-block-mw" for="table-search" i18n>Search</label>

      <my-advanced-input-filter
        inputId="table-search" icon="true" emitOnInit="false" i18n-placeholder placeholder="Search your videos"
        (search)="table.onSearch($event, true)"
      ></my-advanced-input-filter>
    </div>

    <div class="d-flex align-items-center">
      <label class="label-inline" for="table-filter" i18n>Filter</label>

      <my-select-checkbox
        inputId="table-filter"
        showToggleAll="false"
        showClear="true"

        [availableItems]="filterItems"
        [selectableGroup]="false"
        [(ngModel)]="selectedFilterItems"
        i18n-placeholder placeholder="All videos"
        (ngModelChange)="table.onFilter()"
      >
      </my-select-checkbox>
    </div>
  </ng-template>

  <ng-template #tableCells let-video>

    <td *ngIf="table.isColumnDisplayed('duration')">
      <my-video-cell [video]="video" thumbnail="true" title="false"></my-video-cell>
    </td>

    <td *ngIf="table.isColumnDisplayed('name')">
      <my-video-cell class="video-cell-name" [video]="video" thumbnail="false" title="true"></my-video-cell>
    </td>

    <td *ngIf="table.isColumnDisplayed('privacy')">
      <div class="d-flex flex-wrap gap-1">
        <my-privacy-badge [video]="video"></my-privacy-badge>

        <span *ngIf="video.blacklisted" class="pt-badge badge-red" i18n [ngbTooltip]="video.blacklistedReason">Blocked</span>
      </div>
    </td>

    <td *ngIf="table.isColumnDisplayed('sensitive')">
      <my-video-nsfw-badge [video]="video"></my-video-nsfw-badge>
    </td>

    <td *ngIf="table.isColumnDisplayed('playlists')">
      <div class="badges playlists">
        <a *ngFor="let playlist of (videosContainedInPlaylists[video.id] || [])" class="pt-badge badge-secondary pt-badge-keep-case" [routerLink]="['/w/p/', playlist.playlistShortUUID]">
          {{ playlist.playlistDisplayName }}
        </a>
      </div>
    </td>

    <td *ngIf="table.isColumnDisplayed('insights')">
      <a class="pt" [routerLink]="[ '/videos/manage', video.shortUUID, 'stats' ]" i18n-title title="Navigate to the video stats page">
        <ng-container i18n>{video.views, plural, =0 {No views} =1 {1 view} other {{{ video.views | myNumberFormatter }} views}}</ng-container>

        <br />

        @if (video.isLive) {
          <ng-container i18n>{video.viewers, plural, =0 {No viewers} =1 {1 viewer} other {{{ video.views | myNumberFormatter }} viewers}}</ng-container>
        }
      </a>
    </td>

    <td *ngIf="table.isColumnDisplayed('comments')">
      <span i18n>{video.comments, plural, =0 {No comments} =1 {1 comment} other {{{ video.comments | myNumberFormatter }} comments}}</span>
    </td>

    <td *ngIf="table.isColumnDisplayed('published')">
      {{ video.publishedAt | ptDate: 'short' }}
    </td>

    <td *ngIf="table.isColumnDisplayed('state')">
      <my-video-state-badge [video]="video"></my-video-state-badge>
    </td>
  </ng-template>

  <ng-template #actionCell let-video>
    <my-button class="me-3" i18n-label label="Manage" [ptRouterLink]="[ '/videos', 'manage', video.shortUUID ]" theme="secondary" icon="film" responsiveLabel="true"></my-button>

    <my-video-actions-dropdown
      placement="bottom auto" buttonDirection="horizontal" buttonStyled="true" [video]="video" [displayOptions]="videoActionsOptions"
      [moreActions]="moreVideoActions"
      (videoRemoved)="table.loadData()" (videoFilesRemoved)="table.loadData()" (transcodingCreated)="table.loadData()" (videoExistsInPlaylistChange)="fetchVideosContainedInPlaylists([ video ])"
    ></my-video-actions-dropdown>
  </ng-template>

  <ng-template #noResults let-search>
    {{ getNoResults(search) }}
  </ng-template>

</my-table>

<my-video-change-ownership #videoChangeOwnershipModal></my-video-change-ownership>
