<my-table
  #table
  key="MyVideoImportsComponent"
  [defaultColumns]="columns"
  i18n-paginatorText
  paginatorText="imports per page"
  [dataLoader]="dataLoader"
  columnConfig="false"
>
  <ng-template #totalTitle let-totalRecords>
    <ng-container i18n>{ totalRecords, plural, =0 {No import} =1 {1 import} other {{{ totalRecords | myNumberFormatter }} imports}}</ng-container>
  </ng-template>

  <ng-template #captionRight>
    <my-advanced-input-filter (search)="table.onSearch($event)"></my-advanced-input-filter>
  </ng-template>

  <ng-template #tableCells let-videoImport>
    <td class="max-width-300px ellipsis">
      @if (videoImport.targetUrl) {
        <a [href]="videoImport.targetUrl" target="_blank" rel="noopener noreferrer" [title]="videoImport.targetUrl">{{ videoImport.targetUrl }}</a>
      } @else {
        <span [title]="videoImport.torrentName || videoImport.magnetUri">{{ videoImport.torrentName || videoImport.magnetUri }}</span>
      }
    </td>

    <td>
      @if (videoImport.video?.channel) {
        <my-actor-cell [actor]="videoImport.video.channel" actorType="channel"></my-actor-cell>
      }
    </td>

    <td>
      @if (isVideoImportPending(videoImport)) {
        {{ videoImport.video?.name }}
      } @else if (isVideoImportSuccess(videoImport)) {
        @if (videoImport.video) {
          <a [href]="getVideoUrl(videoImport.video)" target="_blank" rel="noopener noreferrer">{{ videoImport.video?.name }}</a>
        } @else {
          <ng-container i18n>This video has been deleted</ng-container>
        }
      }
    </td>

    <td>
      <span class="pt-badge" [ngClass]="getVideoImportStateClass(videoImport.state.id)">
        {{ videoImport.state.label }}
      </span>
    </td>

    <td>{{ videoImport.createdAt | ptDate: 'short' }}</td>
  </ng-template>

  <ng-template #actionCell let-videoImport>
    <my-action-dropdown i18n-label label="Actions" [actions]="videoImportActions" [entry]="videoImport" container="body"></my-action-dropdown>
  </ng-template>

  <ng-template #expandedRow let-videoImport>
    <pre>{{ videoImport.error }}</pre>
  </ng-template>

  <ng-template #noResults>
    <ng-container i18n>No video import found.</ng-container>
  </ng-template>
</my-table>
