<div class="row">
  <div class="col-12">
      <app-header></app-header>

      <div
          class="content"
          id="backgroundStyle"
      >
          <form 
            autocomplete="off"
            [formGroup]="reservaForm"
            >
              <div class="row">
                  <div class="col-6">
                    <mat-form-field appearance="fill">
                      <mat-label>Dia Reservacion</mat-label>
                      <input matInput formControlName="diaReservacion" readonly />
                    </mat-form-field>
                  </div>
                  <div class="col-6">
                    <mat-form-field appearance="fill">
                      <mat-label>Estado</mat-label>
                      <input matInput formControlName="estado" readonly />
                    </mat-form-field>
                  </div>
              </div>
              <div class="row" style="margin-top: 50px">
                  <div class="col-10">
                    <mat-form-field appearance="fill">
                      <mat-label>ID Pasajero</mat-label>
                      <input matInput formControlName="pasajeroId" readonly />
                    </mat-form-field>
                  </div>

                 
              </div>

              <div class="row">
                  <div class="col-12">
                      <table class="table table-striped table-hover">
                          <thead>
                              <tr>
                                  <th scope="col">ID</th>
                                  <th scope="col">Apellido</th>
                                  <th scope="col">Primer Nombre</th>
                                  <th scope="col">Segundo Nombre</th>
                                  <th scope="col">Telefono</th>
                              </tr>
                          </thead>
                          <tbody>
                              <tr class="tr-hover">
                                  <td>{{ pasajero?.id }}</td>
                                  <td>{{ pasajero?.apellido }}</td>
                                  <td>{{ pasajero?.primerNombre }}</td>
                                  <td>{{ pasajero?.segundoNombre }}</td>
                                  <td>{{ pasajero?.telefono }}</td>

                              </tr>
                          </tbody>
                      </table>
                  </div>
              </div>

              <div class="row" style="margin-top: 50px; margin-bottom: 15px">
                  <div class="col-10">
                      <label for="exampleFormControlInput1" class="form-label"
                          >Escalas del vuelo</label
                      >
                  </div>

              </div>
              <!--TABLA VUELO-->
              <div class="row">
                  <div class="col-12">
                      <table class="table table-striped table-hover">
                          <thead>
                              <tr>
                                  <th scope="col">ID</th>
                                  <th scope="col">
                                      Codigo Aeropuerto Origen
                                  </th>
                                  <th scope="col">
                                      Codigo Aeropuerto Destino
                                  </th>
                                  <th scope="col">Hora salida</th>
                                  <th scope="col">Hora llegada</th>

                              </tr>
                          </thead>
                          <tbody>
                              <tr
                                  *ngFor="let escala of escalasVuelo"
                                  class="tr-hover"
                              >
                                  <td>{{ escala.id }}</td>
                                  <td>{{ escala.aeropuertoOrigen }}</td>
                                  <td>{{ escala.aeropuertoDestino }}</td>
                                  <td>{{ escala.fechaSalida  | date: 'M/d/yy, h:mm a'	}}</td>
                                  <td>{{ escala.fechaLlegada  | date: 'M/d/yy, h:mm a'	}}</td>

                              </tr>
                          </tbody>
                      </table>
                  </div>
              </div>

          </form>
      </div>
      
  </div>
</div>
