<nav ngbNav
     #nav="ngbNav"
     class="nav-tabs"
     cdStatefulTab="image-list">
  <ng-container ngbNavItem="issues">
    <a ngbNavLink
       i18n>Issues ({{ image_error.data.length }})</a>
    <ng-template ngbNavContent>
      <cd-table [data]="image_error.data"
                columnMode="flex"
                [columns]="image_error.columns"
                [autoReload]="-1"
                (fetchData)="refresh()"
                [status]="tableStatus">
      </cd-table>
    </ng-template>
  </ng-container>
  <ng-container ngbNavItem="syncing">
    <a ngbNavLink
       i18n>Syncing ({{ image_syncing.data.length }})</a>
    <ng-template ngbNavContent>
      <cd-table [data]="image_syncing.data"
                columnMode="flex"
                [columns]="image_syncing.columns"
                [autoReload]="-1"
                (fetchData)="refresh()"
                [status]="tableStatus">
      </cd-table>
    </ng-template>
  </ng-container>
  <ng-container ngbNavItem="ready">
    <a ngbNavLink
       i18n>Ready ({{ image_ready.data.length }})</a>
    <ng-template ngbNavContent>
      <cd-table [data]="image_ready.data"
                columnMode="flex"
                [columns]="image_ready.columns"
                [autoReload]="-1"
                (fetchData)="refresh()"
                [status]="tableStatus">
      </cd-table>
    </ng-template>
  </ng-container>
</nav>

<div [ngbNavOutlet]="nav"></div>

<ng-template #stateTmpl
             let-row="row"
             let-value="value">
  <span [ngClass]="row.state_color | mirrorHealthColor">{{ value }}</span>
</ng-template>

<ng-template #progressTmpl
             let-row="row"
             let-value="value">
  <div *ngIf="row.state === 'Replaying'">
  </div>
  <div class="w-100 h-100 d-flex justify-content-center align-items-center">
    <ngb-progressbar *ngIf="row.state === 'Replaying'"
                     type="info"
                     class="w-100"
                     [value]="value"
                     [showValue]="true"></ngb-progressbar>
  </div>
</ng-template>

<ng-template #entriesBehindPrimaryTpl
             let-row="row"
             let-value="value">
  <span *ngIf="row.mirror_mode === 'journal'">
    {{ value }}
  </span>
  <span *ngIf="row.mirror_mode === 'snapshot'"
        ngbTooltip="Not available with mirroring snapshot mode">-</span>
</ng-template>
