<div *ngIf="dataSourceTable != null else loading" class="table-container">
  <table mat-table [dataSource]="dataSourceTable">
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef>ID</th>
      <td mat-cell *matCellDef="let element">{{element.id}}</td>
    </ng-container>

    <ng-container matColumnDef="jumpDate">
      <th mat-header-cell *matHeaderCellDef>Date</th>
      <td mat-cell *matCellDef="let element">{{element.jumpDate | date: 'yyyy-MM-dd'}} </td>
    </ng-container>

    <ng-container matColumnDef="jumpType">
      <th mat-header-cell *matHeaderCellDef>Jump Type</th>
      <td mat-cell *matCellDef="let element">{{element.jumpType.name}}</td>
    </ng-container>
    <ng-container matColumnDef="aircraft">
      <th mat-header-cell *matHeaderCellDef>Aircraft</th>
      <td mat-cell *matCellDef="let element">{{element.aircraft.name}}</td>
    </ng-container>
    <ng-container matColumnDef="dropZone">
      <th mat-header-cell *matHeaderCellDef>Drop Zone</th>
      <td mat-cell *matCellDef="let element">{{element.dropZone.name}}</td>
    </ng-container>
    <ng-container matColumnDef="gear">
      <th mat-header-cell *matHeaderCellDef>Gear</th>
      <td mat-cell *matCellDef="let element">{{element.gear.name}}</td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>
<mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>

<ng-template #loading>
  <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
</ng-template>
