<my-table
  #table
  key="VideoAdminListComponent"
  [defaultColumns]="columns"
  defaultSort="publishedAt"
  i18n-paginatorText
  paginatorText="videos per page"
  defaultRowsPerPage="10"
  [bulkActions]="bulkActions"
  [dataLoader]="dataLoader"
  (rowExpand)="onRowExpand($event)"
  columnConfig="false"
  >

  <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>
    <my-advanced-input-filter [filters]="inputFilters" (search)="table.onSearch($event)"></my-advanced-input-filter>

    <my-button i18n-label label="Refresh" icon="refresh" (click)="table.loadData()"></my-button>
  </ng-template>

  <ng-template #tableCells let-video>
    <td>
      <my-video-cell [video]="video" size="small"></my-video-cell>
    </td>

    <td>
      <div>
        @if (video.isLocal) {
          <span class="pt-badge badge-blue" i18n>Local</span>
        } @else {
          <span class="pt-badge badge-purple" i18n>Remote</span>
        }

        <my-privacy-badge [video]="video"></my-privacy-badge>

        <my-video-nsfw-badge [video]="video" theme="red"></my-video-nsfw-badge>

        @if (isUnpublished(video)) {
          <span class="pt-badge badge-yellow">{{ video.state.label }}</span>
        }

        @if (isAccountBlocked(video)) {
          <span class="pt-badge badge-red" i18n>Account muted</span>
        }
        @if (isServerBlocked(video)) {
          <span class="pt-badge badge-red" i18n>Server muted</span>
        }

        @if (isVideoBlocked(video)) {
          <span class="pt-badge badge-red" i18n>Blocked</span>
        }
      </div>

      <div>
        @for (tag of video.automaticTags; track tag) {
          <a
            i18n-title title="Only display videos with this tag"
            class="pt-badge badge-secondary me-1"
            [routerLink]="[ '.' ]" [queryParams]="{ 'search': buildSearchAutoTag(tag) }"
          >{{ tag }}</a>
        }
      </div>
    </td>

    <td>
      @if (hasOriginalFile(video)) {
        <span class="pt-badge badge-blue" i18n>Original file</span>
      }
      @if (hasHLS(video)) {
        <span class="pt-badge badge-blue" i18n>HLS</span>
      }
      @if (hasWebVideos(video)) {
        <span class="pt-badge badge-blue" i18n>Web Videos ({{ video.files.length }})</span>
      }
      @if (video.isLive) {
        <span class="pt-badge badge-blue" i18n>Live</span>
      }
      @if (hasObjectStorage(video)) {
        <span class="pt-badge badge-purple" i18n>Object storage</span>
      }

      @if (!isImport(video) && !video.isLive && video.isLocal) {
        <span>{{ getFilesSize(video) | bytes: 1 }}</span>
      }
    </td>

    <td>
      {{ video.publishedAt | ptDate: 'short' }}
    </td>
  </ng-template>

  <ng-template #actionCell let-video>
    <my-video-actions-dropdown
      placement="bottom auto" buttonIcon="more-horizontal" buttonStyled="true" [video]="video" [displayOptions]="videoActionsOptions"
      (videoRemoved)="table.loadData()" (videoFilesRemoved)="table.loadData()" (transcodingCreated)="table.loadData()"
    ></my-video-actions-dropdown>
  </ng-template>

  <ng-template #expandedRow let-video>
    <div class="video-expanded-info">
      @if (hasOriginalFile(video)) {
        <div class="me-3">
          <ng-container i18n>Original file:</ng-container>
          <ul>
            <li>
              <a title="Download this file" i18n-title [href]="getDownloadUrl(video, video.videoSource.fileDownloadUrl)">{{ video.videoSource.inputFilename }}</a>: {{ video.videoSource.size | bytes: 1 }}
              <button class="border-0 p-0" i18n-title title="Delete this file" (click)="removeVideoSourceFile(video)">
                <my-global-icon iconName="delete"></my-global-icon>
              </button>
            </li>
          </ul>
        </div>
      }

      @if (hasWebVideos(video)) {
        <div class="me-3">
          <ng-container i18n>Web Videos:</ng-container>
          <ul>
            @for (file of video.files; track file) {
              <li>
                <a title="Download this file" i18n-title [href]="getDownloadUrl(video, file.fileDownloadUrl)">{{ file.resolution.label }}</a>: {{ file.size | bytes: 1 }}
                @if (canRemoveOneFile(video)) {
                  <button
                    class="border-0 p-0"
                    i18n-title title="Delete this file"
                    (click)="removeVideoFile(video, file, 'web-videos')"
                    >
                    <my-global-icon iconName="delete"></my-global-icon>
                  </button>
                }
              </li>
            }
          </ul>
        </div>
      }

      @if (hasHLS(video)) {
        <div>
          <ng-container i18n>HLS:</ng-container>
          <ul>
            @for (file of video.streamingPlaylists[0].files; track file) {
              <li>
                <a title="Download this file" i18n-title [href]="getDownloadUrl(video, file.fileDownloadUrl)">{{ file.resolution.label }}</a>: {{ file.size | bytes: 1 }}
                @if (canRemoveOneFile(video)) {
                  <button
                    class="border-0 p-0"
                    i18n-title title="Delete this file"
                    (click)="removeVideoFile(video, file, 'hls')"
                    >
                    <my-global-icon iconName="delete"></my-global-icon>
                  </button>
                }
              </li>
            }
          </ul>
        </div>
      }

      <my-embed class="ms-auto" [video]="video"></my-embed>
    </div>
  </ng-template>

  <ng-template #noResults let-search>
    @if (search) {
      <ng-container i18n>No videos found matching current filters.</ng-container>
    } @else {
      <ng-container i18n>Your platform doesn't have videos.</ng-container>
    }
  </ng-template>

</my-table>

<my-video-block #videoBlockModal (videoBlocked)="table.loadData()"></my-video-block>
