<div class="popup-general">
  <div class="row">
      <div class="col-lg-12">
          <div class="dialog-title">
              <img src="{{ logoSrc }}" with="25" height="25">
              <span class="header-popup-text">Agregar una escala</span>
              <div class="pull-right">
                  <button type="button" class="close" (click)="close()"></button>
              </div>
          </div>
      </div>
  </div>

  <div mat-dialog-content class="dialog-content">
      <form [formGroup]="form" name="form" autocomplete="off" novalidate>
          <div class="group-content">
              <div class="row" style="margin-top: 15px; margin-bottom: 15px;">
                  <div class="col-5" style="margin-inline: auto;">
                      <byte-datepicker-select name="fechaLlegada" label="Fecha Salida"
                          placeholder="Fecha Salida" [formGroup]="form"
                          [disabled]="this.form.controls['fechaLlegada'].disabled" 
                          [minDate]="minDate">
                      </byte-datepicker-select>
                  </div>
                  <div class="col-5" style="margin-inline: auto;">
                      <byte-datepicker-select name="fechaSalida" label="Fecha Llegada"
                          placeholder="Fecha Llegada" [formGroup]="form"
                          [disabled]="this.form.controls['fechaSalida'].disabled" 
                          [minDate]="minDate">
                      </byte-datepicker-select>
                  </div>
              </div>
              <div class="row" style="margin-top: 15px; margin-bottom: 15px;">
                  <div class="col-5" style="margin-inline: auto;">
                      <mat-form-field style="width: 100%;">
                        <mat-label>Aeropuerto Origen</mat-label>
                          <mat-select formControlName="codigoAeropuertoOrigen">
                            <mat-option *ngFor="let aeropuerto of aeropuertos" [value]="aeropuerto.id">
                              {{aeropuerto.codigo}}
                            </mat-option>
                        </mat-select>
                      </mat-form-field>
                  </div>

                  <div class="col-5" style="margin-inline: auto;">
                    <mat-form-field style="width: 100%;">
                      <mat-label>Aeropuerto Destino</mat-label>
                        <mat-select formControlName="codigoAeropuertoDestino">
                          <mat-option *ngFor="let aeropuerto of aeropuertos" [value]="aeropuerto.id">
                            {{aeropuerto.codigo}}
                          </mat-option>
                      </mat-select>
                    </mat-form-field>
                </div>
              </div>
          </div>
      </form>
  </div>

  <div class="dialog-footer">
      <div>
          <button type="button" class="btn btn-primary pull-right" (click)="save()" *ngIf="mode !== 'view'"
              [disabled]="record ? ((form?.invalid && form?.touched) || processing) : (form?.invalid || processing)">
              <span><i class="fa fa-floppy-o"></i>&nbsp;{{ 'btn.save' | translate }}</span>
          </button>
          &nbsp;
          <button class="btn btn-default pull-left" (click)="close()">
              <span>{{ 'btn.cancel' | translate }}</span>
          </button>
      </div>
  </div>
</div>