<my-table
  #table
  key="VideoRedundanciesListComponent"
  [defaultColumns]="columns"
  defaultSort="name"
  defaultSortOrder="asc"
  i18n-paginatorText
  paginatorText="redundancies per page"
  [dataLoader]="dataLoader"
  [customParseQueryParams]="customParseQueryParams"
  [customUpdateUrl]="customUpdateUrl"
  columnConfig="false"
>
<ng-template #totalTitle let-totalRecords>
    <ng-container i18n>{ totalRecords, plural, =0 {No redundancy} =1 {1 redundancy} other {{{ totalRecords | myNumberFormatter }} redundancies}}</ng-container>
  </ng-template>

  <ng-template #captionRight>
    <div class="select-filter-block">
      <label for="displayType" i18n>Display</label>

      <div class="peertube-select-container">
        <select id="displayType" name="displayType" [(ngModel)]="displayType" (ngModelChange)="onDisplayTypeChanged()" class="form-control">
          <option value="my-videos" i18n>My videos duplicated by remote instances</option>
          <option value="remote-videos" i18n>Remote videos duplicated by my instance</option>
        </select>
      </div>
    </div>
  </ng-template>

  <ng-template #tableCells let-redundancy>
    <td *ngIf="isDisplayingRemoteVideos()">{{ getRedundancyStrategy(redundancy) }}</td>

    <td>
      <a [href]="redundancy.url" i18n-title title="Open video in a new tab" target="_blank" rel="noopener noreferrer">
        {{ redundancy.name }}
        <my-global-icon iconName="external-link"></my-global-icon>
      </a>
    </td>

    <td *ngIf="isDisplayingRemoteVideos()">{{ getTotalSize(redundancy) | bytes: 1 }}</td>
  </ng-template>

  <ng-template #actionCell let-redundancy>
    <my-delete-button label (click)="removeRedundancy(redundancy)"></my-delete-button>
  </ng-template>

  <ng-template #expandedRow let-redundancy>
    <div *ngFor="let playlist of redundancy.redundancies.streamingPlaylists">
      <my-video-redundancy-information [redundancyElement]="playlist"></my-video-redundancy-information>
    </div>
  </ng-template>

  <ng-template #noResults>
    @if (isDisplayingRemoteVideos()) {
      <ng-container i18n>Your instance doesn't mirror any video.</ng-container>
    } @else {
      <ng-container i18n>Your instance has no mirrored videos.</ng-container>
    }
  </ng-template>
</my-table>

<div class="redundancies-charts" *ngIf="isDisplayingRemoteVideos() && dataLoaded">
  <h6 i18n>Enabled strategies stats</h6>

  <div class="chart-blocks">

    <div *ngIf="noRedundancies" i18n class="no-results">
      No redundancy strategy is enabled on your instance.
    </div>

    <div class="chart-block" *ngFor="let r of redundanciesGraphsData">
      <p-chart [ariaLabel]="r.ariaLabel" type="pie" [data]="r.graphData" [options]="r.options" width="300px" height="300px"></p-chart>
    </div>

  </div>
</div>
