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

      <div class="content">
          <div>

            <form autocomplete="off"
            [formGroup]="vueloForm">
            <div class="row">
              <div class="col-6">

                <mat-form-field>
                  <mat-label mat-label>Dia Salida</mat-label>
                  <input matInput type="datetime-local" formControlName="fechaSalida" #diaSalidaVuelo required>
                </mat-form-field> 
              </div>
              <div class="col-6">
                <mat-form-field>
                  <mat-label mat-label>Dia Lllegada</mat-label>
                  <input matInput type="datetime-local" formControlName="fechaLlegada" #diaLlegadaVuelo required>
                </mat-form-field>
              </div>
          </div>
          <div class="row">
              <div class="col-6">
                <mat-form-field appearance="fill">
                  <mat-label>Aeropuerto Origen</mat-label>
                  <mat-select formControlName="origen">
                    <mat-option *ngFor="let aeropuerto of aeropuertos" [value]="aeropuerto.id"
                    >
                      {{aeropuerto.codigo}}
                    </mat-option>
                  </mat-select>
                </mat-form-field>
                
              </div>
              <div class="col-6">
                <mat-form-field appearance="fill">
                  <mat-label>Aeropuerto Destino</mat-label>
                  <mat-select formControlName="destino">
                    <mat-option *ngFor="let aeropuerto of aeropuertos" [value]="aeropuerto.id"
                    >
                      {{aeropuerto.codigo}}
                    </mat-option>
                  </mat-select>
                </mat-form-field>
              </div>
          </div>
          <div class="row">
              <div class="col-6">
                <mat-form-field appearance="fill">
                  <mat-label mat-label>Codigo Aerolinea</mat-label>
                  <input matInput formControlName="codigoAerolinea" required>
                </mat-form-field>
              </div>
              <div class="col-6">
                <mat-form-field appearance="fill">
                  <mat-label mat-label>Codigo Tipo Aeronave Habitual</mat-label>
                  <input matInput formControlName="codigoTipoAeronave" required>
                </mat-form-field>
              </div>
          </div>
          <div class="row">
              <div class="col-6">
                <mat-form-field appearance="fill">
                  <mat-label mat-label>Costo</mat-label>
                  <input matInput formControlName="costo" required>
                  <span matTextPrefix>$&nbsp;</span>
                  <span matTextSuffix>.00</span>
                </mat-form-field>
              </div>
          </div>
            </form>
              

              <div class="row" style="margin-top: 50px; margin-bottom: 15px">
                  <div class="col-10">
                      <label for="exampleFormControlInput1" class="form-label"
                          >Escalas</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">Hora salida</th>

                                  <th scope="col">Hora llegada</th>

                                  <th scope="col">
                                      Codigo Aeropuerto Origen
                                  </th>
                                  <th scope="col">
                                      Codigo Aeropuerto Destino
                                  </th>
                                  <th scope="col"></th>
                              </tr>
                          </thead>
                          <tbody>
                              <tr
                                  *ngFor="let escala of escalasPost;let i = index"
                                  class="tr-hover"
                              >
                                  <td> {{ i+1 }}</td>
                                  <td>{{ escala.fechaSalida | date: 'M/d/yy, h:mm a' }}</td>
                                  <td>{{ escala.fechaLlegada  | date: 'M/d/yy, h:mm a'}}</td>
                                  <td>{{ escala.aeropuertoOrigen }}</td>
                                  <td>{{ escala.aeropuertoDestino }}</td>

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

  </div>
</div>

