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

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

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

    <button class="peertube-create-button" (click)="openFollowModal()">
      <my-global-icon iconName="following" aria-hidden="true"></my-global-icon>
      <ng-container i18n>Follow</ng-container>
    </button>
  </ng-template>

  <ng-template #tableCells let-follow>
    <td>
      <a [href]="follow.following.url" i18n-title title="Open instance in a new tab" target="_blank" rel="noopener noreferrer">
        {{ buildFollowingName(follow) }}
        <my-global-icon iconName="external-link"></my-global-icon>
      </a>
    </td>

    <td>
      <span *ngIf="follow.state === 'accepted'" class="pt-badge badge-green" i18n>Accepted</span>
      <span *ngIf="follow.state === 'pending'" class="pt-badge badge-yellow" i18n>Pending</span>
      <span *ngIf="follow.state === 'rejected'" class="pt-badge badge-red" i18n>Rejected</span>
    </td>

    <td>{{ follow.createdAt | ptDate: 'short' }}</td>
    <td>
      <my-redundancy-checkbox
        *ngIf="isInstanceFollowing(follow)"
        [host]="follow.following.host" [redundancyAllowed]="follow.following.hostRedundancyAllowed"
      ></my-redundancy-checkbox>
    </td>
  </ng-template>

  <ng-template #actionCell let-follow>
    <my-delete-button label (click)="removeFollowing([ follow ])"></my-delete-button>
  </ng-template>

  <ng-template #noResults let-search>
    @if (search) {
      <ng-container i18n>No host found matching current filters.</ng-container>
    } @else {
      <ng-container i18n>Your instance is not following anyone.</ng-container>
    }
  </ng-template>
</my-table>

<my-follow-modal #followModal></my-follow-modal>
