<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="arrivalDate" label="Fecha Salida" placeholder="Fecha Salida"
                            [formGroup]="form" [disabled]="this.form.controls['arrivalDate'].disabled"
                            [minDate]="minDate">
                        </byte-datepicker-select>
                    </div>
                    <div class="col-5" style="margin-inline: auto;">
                        <byte-datepicker-select name="departureDate" label="Fecha Llegada" placeholder="Fecha Llegada"
                            [formGroup]="form" [disabled]="this.form.controls['departureDate'].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="codeAirportOrigin">
                                <mat-option *ngFor="let airport of airports" [value]="airport.id">
                                    {{airport.airportCode}}
                                </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="codeAirportDestination">
                                <mat-option *ngFor="let airport of airports" [value]="airport.id">
                                    {{airport.airportCode}}
                                </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>