@if (!syncEnabled()) {
  <div>
    <p class="muted" i18n>⚠️ The instance doesn't allow channel synchronization</p>
  </div>
}

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

  <ng-template #captionRight>
    <a class="peertube-create-button" routerLink="{{ getSyncCreateLink() }}">
      <my-global-icon iconName="add" aria-hidden="true"></my-global-icon>
      <ng-container i18n>Add synchronization</ng-container>
    </a>
  </ng-template>

  <ng-template #tableCells let-sync>
    <td>
      <a [href]="sync.externalChannelUrl" target="_blank" rel="noopener noreferrer">{{ sync.externalChannelUrl }}</a>
    </td>

    <td>
      <my-actor-cell [actor]="sync.channel" actorType="channel"></my-actor-cell>
    </td>

    <td>
      <span [ngClass]="getSyncStateClass(sync.state.id)">
        {{ sync.state.label }}
      </span>
    </td>

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

  <ng-template #actionCell let-sync>
    <my-action-dropdown container="body" [actions]="videoChannelSyncActions" [entry]="sync"></my-action-dropdown>
  </ng-template>

  <ng-template #noResults>
    <ng-container i18n>You don't have channel synchronisation configured.</ng-container>
  </ng-template>
</my-table>