Chocobozzz/PeerTube

<div class="sub-title-container">
  <div class="sub-title">
    <my-global-icon iconName="following" aria-hidden="true"></my-global-icon>
    <h1 i18n>Subscriptions of your instance</h1>
  </div>
</div>

<p-table
  [value]="following" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"
  [rowsPerPageOptions]="rowsPerPageOptions" [sortField]="sort.field" [sortOrder]="sort.order"
  [lazy]="true" (onLazyLoad)="loadLazy($event)" [lazyLoadOnInit]="false"
  [showCurrentPageReport]="true" [currentPageReportTemplate]="getPaginationTemplate()"
  [(selection)]="selectedRows"
>
  <ng-template pTemplate="caption">
    <div class="caption">
      <div class="left-buttons">
        <my-action-dropdown
          *ngIf="isInSelectionMode()" i18n-label label="Batch actions" theme="orange"
          [actions]="bulkActions" [entry]="selectedRows"
        >
        </my-action-dropdown>

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

      <div class="ms-auto d-flex gap-1">
        <my-advanced-input-filter [filters]="searchFilters" (search)="onSearch($event)"></my-advanced-input-filter>

        <my-button i18n-label label="Refresh" icon="refresh" (click)="reloadData()"></my-button>
      </div>
    </div>
  </ng-template>

  <ng-template pTemplate="header">
    <tr>
      <th scope="col" style="width: 40px">
        <p-tableHeaderCheckbox ariaLabel="Select all rows" i18n-ariaLabel></p-tableHeaderCheckbox>
      </th>
      <th scope="col" style="width: 150px;" i18n>Action</th>
      <th scope="col" i18n>Following</th>
      <th scope="col" style="width: 100px;" i18n pSortableColumn="state">State <p-sortIcon field="state"></p-sortIcon></th>
      <th scope="col" style="width: 150px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
      <th scope="col" style="width: 160px;" i18n pSortableColumn="redundancyAllowed">Redundancy allowed <p-sortIcon field="redundancyAllowed"></p-sortIcon></th>
    </tr>
  </ng-template>

  <ng-template pTemplate="body" let-follow>
    <tr pSelectableRow="follow">
      <td class="checkbox-cell">
        <p-tableCheckbox [value]="follow" ariaLabel="Select this row" i18n-ariaLabel></p-tableCheckbox>
      </td>

      <td class="action-cell">
        <my-delete-button label (click)="removeFollowing([ follow ])"></my-delete-button>
      </td>
      <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 | date: 'short' }}</td>
      <td>
        <my-redundancy-checkbox
          *ngIf="isInstanceFollowing(follow)"
          [host]="follow.following.host" [redundancyAllowed]="follow.following.hostRedundancyAllowed"
        ></my-redundancy-checkbox>
      </td>
    </tr>
  </ng-template>

  <ng-template pTemplate="emptymessage">
    <tr>
      <td myAutoColspan>
        <div class="no-results">
          <ng-container *ngIf="search" i18n>No host found matching current filters.</ng-container>
          <ng-container *ngIf="!search" i18n>Your instance is not following anyone.</ng-container>
        </div>
      </td>
    </tr>
  </ng-template>
</p-table>

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