<my-table
  #table
  key="VideoBlockListComponent"
  [defaultColumns]="columns"
  i18n-paginatorText
  paginatorText="videos per page"
  [dataLoader]="dataLoader"
  columnConfig="false"
>
  <ng-template #totalTitle let-totalRecords>
    <ng-container i18n>{ totalRecords, plural, =0 {No video} =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>
  </ng-template>

  <ng-template #tableCells let-videoBlock>
    <td>
      <my-video-cell [video]="videoBlock.video" size="small">
        <div>
          @if (videoBlock.type === 2) {
            <span i18n-title title="The video was blocked due to automatic blocking of new videos" class="pt-badge badge-info badge-small" i18n>Auto block</span>
          }
        </div>
      </my-video-cell>
    </td>

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

    <td>
      <span *ngIf="videoBlock.unfederated" class="pt-badge badge-blue" i18n>Unfederated</span>
    </td>

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

  <ng-template #actionCell let-videoBlock>
    <my-action-dropdown
      placement="bottom-right auto" container="body"
      i18n-label label="Actions" [actions]="videoBlocklistActions" [entry]="videoBlock"
    ></my-action-dropdown>
  </ng-template>

  <ng-template #expandedRow let-videoBlock>
    <div *ngIf="videoBlock" class="d-flex moderation-expanded">
      <div class="left">
        <span class="moderation-expanded-label" i18n>Block reason:</span>
        <span class="moderation-expanded-text" [innerHTML]="videoBlock.reasonHtml"></span>
      </div>

      <div class="right">
        <my-embed [video]="videoBlock.video"></my-embed>
      </div>
    </div>
  </ng-template>

  <ng-template #noResults let-search>
    @if (search) {
      <ng-container i18n>No blocked video found matching current filters.</ng-container>
    } @else {
      <ng-container i18n>No blocked video found.</ng-container>
    }
  </ng-template>
</my-table>

