<app-toolbar-menu></app-toolbar-menu>

<div class="container">
  <div *ngIf="pilotService.currentPilots">
    <div *ngIf="pilotService.currentPilots.length != 0">
      <h2>Current pilots</h2>

      <mat-accordion>
        <mat-expansion-panel *ngFor="let pilot of pilotService.currentPilots">
          <mat-expansion-panel-header class="row">
            <mat-panel-title class="col-md-5">
              {{pilot.nickname}}
            </mat-panel-title>
            <mat-panel-description class="col-md-5">
              Run : {{pilot.run}}
            </mat-panel-description>
          </mat-expansion-panel-header>
          <div class="row">
            <div class="col-md-5">
              Run n°{{pilot.run}}
            </div>
            <div class="col-md-5">
              Id : {{pilot.pilotId}}
            </div>
          </div>
        </mat-expansion-panel>
      </mat-accordion>
    </div>
  </div>

  <div *ngIf="pilotService.passedPilots">
    <div *ngIf="pilotService.passedPilots.length != 0">
      <h2>Old run pilots</h2>

      <mat-accordion>
        <mat-expansion-panel *ngFor="let pilot of pilotService.passedPilots">
          <mat-expansion-panel-header class="row">
            <mat-panel-title class="col-md-5">
              {{pilot.nickname}}
            </mat-panel-title>
            <mat-panel-description class="col-md-5">
              Run : {{pilot.run}}
            </mat-panel-description>
          </mat-expansion-panel-header>
          <div class="row">
            <div class="col-md-5">
              Run n°{{pilot.run}}
            </div>
            <div class="col-md-5">
              Id : {{pilot.pilotId}}
            </div>
          </div>
        </mat-expansion-panel>
      </mat-accordion>
    </div>
  </div>

  <div *ngIf="pilotService.currentPilots && pilotService.passedPilots">
    <div *ngIf="pilotService.currentPilots.length == 0 && pilotService.passedPilots.length == 0">
      <h2>No pilots for the moment...</h2>
    </div>
  </div>
</div>