<div>
  <label style="float: left; width: 130px;">Total jumps</label>
  <span>: {{ totalJumps }}</span>
</div>

<div>
  <label style="clear: both; float: left; width: 130px;">Total cutaways</label>
  <span>: {{ totalCutaways }}</span>
</div>

<div>
  <label style="clear: both; float: left; width: 130px;">Last jump</label>
  <span>: {{ lastJump }}</span>
</div>

<div style="clear: both; display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 15px;">
  <label (click)="showStats(1)" [ngClass]="statsToShow(1) ? 'labelTab selected': 'labelTab'">Jumps in the last
    month</label>
  <label (click)="showStats(2)" [ngClass]="statsToShow(2) ? 'labelTab selected': 'labelTab'">Jumps in the last
    year</label>
  <label (click)="showStats(3)" [ngClass]="statsToShow(3) ? 'labelTab selected': 'labelTab'">By DZ</label>
  <label (click)="showStats(4)" [ngClass]="statsToShow(4) ? 'labelTab selected': 'labelTab'">By aircraft</label>
  <label (click)="showStats(5)" [ngClass]="statsToShow(5) ? 'labelTab selected': 'labelTab'">By gear</label>
  <label (click)="showStats(6)" [ngClass]="statsToShow(6) ? 'labelTab selected': 'labelTab'">By jump type</label>
  <label (click)="showStats(7)" [ngClass]="statsToShow(7) ? 'labelTab selected': 'labelTab'">By year</label>
</div>

<div *ngIf="statsToShow(1)">
  <table mat-table [dataSource]="dsJumpForLastMonthByDz"
    *ngIf="dsJumpForLastMonthByDz != null else loadingDsJumpForLastMonthByDz">
    <ng-container matColumnDef="label">
      <td mat-cell *matCellDef="let element">{{element.label}}</td>
    </ng-container>
    <ng-container matColumnDef="nb">
      <td mat-cell *matCellDef="let element">{{element.nb}}</td>
    </ng-container>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
  <ng-template #loadingDsJumpForLastMonthByDz>
    <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
  </ng-template>

  <table mat-table [dataSource]="dsJumpForLastMonthByJumpType"
    *ngIf="dsJumpForLastMonthByJumpType != null else loadingDsJumpForLastMonthByJumpType">
    <ng-container matColumnDef="label">
      <td mat-cell *matCellDef="let element">{{element.label}}</td>
    </ng-container>
    <ng-container matColumnDef="nb">
      <td mat-cell *matCellDef="let element">{{element.nb}}</td>
    </ng-container>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
  <ng-template #loadingDsJumpForLastMonthByJumpType>
    <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
  </ng-template>
</div>

<div *ngIf="statsToShow(2)">
  <table mat-table [dataSource]="dsJumpForLastYearByDz"
    *ngIf="dsJumpForLastYearByDz != null else loadingDsJumpForLastYearByDz">
    <ng-container matColumnDef="label">
      <td mat-cell *matCellDef="let element">{{element.label}}</td>
    </ng-container>
    <ng-container matColumnDef="nb">
      <td mat-cell *matCellDef="let element">{{element.nb}}</td>
    </ng-container>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
  <ng-template #loadingDsJumpForLastYearByDz>
    <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
  </ng-template>

  <table mat-table [dataSource]="dsJumpForLastYearByJumpType"
    *ngIf="dsJumpForLastYearByJumpType != null else loadingDsJumpForLastYearByJumpType">
    <ng-container matColumnDef="label">
      <td mat-cell *matCellDef="let element">{{element.label}}</td>
    </ng-container>
    <ng-container matColumnDef="nb">
      <td mat-cell *matCellDef="let element">{{element.nb}}</td>
    </ng-container>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
  <ng-template #loadingDsJumpForLastYearByJumpType>
    <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
  </ng-template>
</div>

<div *ngIf="statsToShow(3)">
  <table mat-table [dataSource]="dsNbJumpByDz" *ngIf="dsNbJumpByDz != null else loadingDsNbJumpByDz">
    <ng-container matColumnDef="label">
      <td mat-cell *matCellDef="let element">{{element.label}}</td>
    </ng-container>
    <ng-container matColumnDef="nb">
      <td mat-cell *matCellDef="let element">{{element.nb}}</td>
    </ng-container>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
  <ng-template #loadingDsNbJumpByDz>
    <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
  </ng-template>
</div>

<div *ngIf="statsToShow(4)">
  <table mat-table [dataSource]="dsNbJumpByAircraft" *ngIf="dsNbJumpByAircraft != null else loadingDsNbJumpByAircraft">
    <ng-container matColumnDef="label">
      <td mat-cell *matCellDef="let element">{{element.label}}</td>
    </ng-container>
    <ng-container matColumnDef="nb">
      <td mat-cell *matCellDef="let element">{{element.nb}}</td>
    </ng-container>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
  <ng-template #loadingDsNbJumpByAircraft>
    <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
  </ng-template>
</div>

<div *ngIf="statsToShow(5)">
  <table mat-table [dataSource]="dsNbJumpByGear" *ngIf="dsNbJumpByGear != null else loadingDsNbJumpByGear">
    <ng-container matColumnDef="label">
      <td mat-cell *matCellDef="let element">{{element.label}}</td>
    </ng-container>
    <ng-container matColumnDef="nb">
      <td mat-cell *matCellDef="let element">{{element.nb}}</td>
    </ng-container>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
  <ng-template #loadingDsNbJumpByGear>
    <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
  </ng-template>
</div>

<div *ngIf="statsToShow(6)">
  <table mat-table [dataSource]="dsNbJumpByType" *ngIf="dsNbJumpByType != null else loadingDsNbJumpByType">
    <ng-container matColumnDef="label">
      <td mat-cell *matCellDef="let element">{{element.label}}</td>
    </ng-container>
    <ng-container matColumnDef="nb">
      <td mat-cell *matCellDef="let element">{{element.nb}}</td>
    </ng-container>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
  <ng-template #loadingDsNbJumpByType>
    <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
  </ng-template>
</div>

<div *ngIf="statsToShow(7)">
  <table mat-table [dataSource]="dsNbJumpByYear" *ngIf="dsNbJumpByYear != null else loadingDsNbJumpByYear">
    <ng-container matColumnDef="label">
      <td mat-cell *matCellDef="let element">{{element.label}}</td>
    </ng-container>
    <ng-container matColumnDef="nb">
      <td mat-cell *matCellDef="let element">{{element.nb}}</td>
    </ng-container>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
  <ng-template #loadingDsNbJumpByYear>
    <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
  </ng-template>
</div>
