<div class="content">
  <div class="paragraph">
    <label class="left130">Total jumps</label>
    <span>: {{ totalJumps }}</span>
  </div>

  <div class="paragraph">
    <label class="left130">Total cutaways</label>
    <span>: {{ totalCutaways }}</span>
  </div>

  <div class="paragraph">
    <label class="left130">Last jump</label>
    <span>: {{ lastJump }}</span>
  </div>

  <mat-tab-group mat-align-tabs="left" animationDuration="0ms">
    <mat-tab label="Jumps in the last month">
      <table mat-table [dataSource]="dsJumpForLastMonthByDz">
        <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>
      <table mat-table [dataSource]="dsJumpForLastMonthByJumpType">
        <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>
    </mat-tab>

    <mat-tab label="Jumps in the last year">
      <table mat-table [dataSource]="dsJumpForLastYearByDz">
        <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>
      <table mat-table [dataSource]="dsJumpForLastYearByJumpType">
        <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>
    </mat-tab>

    <mat-tab label="By DZ">
      <table mat-table [dataSource]="dsNbJumpByDz">
        <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>
    </mat-tab>

    <mat-tab label="By aircraft">
      <table mat-table [dataSource]="dsNbJumpByAircraft">
        <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>
    </mat-tab>

    <mat-tab label="By gear">
      <table mat-table [dataSource]="dsNbJumpByGear">
        <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>
    </mat-tab>

    <mat-tab label="By jump type">
      <table mat-table [dataSource]="dsNbJumpByType">
        <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>
    </mat-tab>

    <mat-tab label="By year">
      <table mat-table [dataSource]="dsNbJumpByYear">
        <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>
    </mat-tab>
  </mat-tab-group>
</div>
