<div class="content">
  <div *ngIf="dataSourceTable != null else loading">
    <button mat-raised-button color="accent" (click)="openDialogToAdd()">Add a gear</button>

    <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="name">
        <th mat-header-cell *matHeaderCellDef>Name</th>
        <td mat-cell *matCellDef="let element">{{element.name}}</td>
      </ng-container>

      <ng-container matColumnDef="manufacturer">
        <th mat-header-cell *matHeaderCellDef>Manufacturer</th>
        <td mat-cell *matCellDef="let element">{{element.manufacturer}}</td>
      </ng-container>

      <ng-container matColumnDef="maxSize">
        <th mat-header-cell *matHeaderCellDef>Canopy size</th>
        <td mat-cell *matCellDef="let element">{{element.maxSize}} - {{element.minSize}}</td>
      </ng-container>

      <ng-container matColumnDef="aad">
        <th mat-header-cell *matHeaderCellDef>AAD system</th>
        <td mat-cell *matCellDef="let element">{{element.aad}}</td>
      </ng-container>

      <ng-container matColumnDef="mainCanopy">
        <th mat-header-cell *matHeaderCellDef>Main canopy</th>
        <td mat-cell *matCellDef="let element">{{element.mainCanopy}}</td>
      </ng-container>

      <ng-container matColumnDef="reserveCanopy">
        <th mat-header-cell *matHeaderCellDef>Reserve canopy</th>
        <td mat-cell *matCellDef="let element">{{element.reserveCanopy}}</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>
</div>
