<div class="summaryStep">
    <div class="custom_container">
        <div class="custom_container-header">
            <span>Resumen</span>
        </div>
        <div class="custom_container-content">

            <div class="legend">
                <span class="group-title">Información base</span>
            </div>

            <div class="dictionaries">
                <div class="dictionary">
                    <span class="dictionaty__key">Pasajero</span>
                    <span class="dictionary_value">{{ passenger }}</span>
                </div>
                <div class="dictionary">
                    <span class="dictionaty__key">Tipo de ticket</span>
                    <span class="dictionary_value">{{ ticketType }}</span>
                </div>
                <div class="dictionary">
                    <span class="dictionaty__key">Clase de vuelo</span>
                    <span class="dictionary_value">{{ travelClass }}</span>
                </div>
            </div>

            <div class="legend">
                <span class="group-title">Selección de vuelo</span>
            </div>

            <div class="dictionaries">
                <div class="dictionary">
                    <span class="dictionaty__key">Origen</span>
                    <span class="dictionary_value">{{ flight?.airportOrigin }}</span>
                </div>
                <div class="dictionary">
                    <span class="dictionaty__key">Destino</span>
                    <span class="dictionary_value">{{ flight?.airportDestination }}</span>
                </div>
                <div class="dictionary">
                    <span class="dictionaty__key">Fecha de salida</span>
                    <span class="dictionary_value">{{ flight?.departureDate }}</span>
                </div>
                <div class="dictionary">
                    <span class="dictionaty__key">Fecha de llegada</span>
                    <span class="dictionary_value">{{ flight?.arrivalDate }}</span>
                </div>
                <div class="dictionary">
                    <span class="dictionaty__key">Aerolinea</span>
                    <span class="dictionary_value">{{ flight?.airline }}</span>
                </div>
                <div class="dictionary">
                    <span class="dictionaty__key">Tipo de vuelo</span>
                    <span class="dictionary_value">{{ flight?.flightType }}</span>
                </div>
                <div class="dictionary">
                    <span class="dictionaty__key">Costo total</span>
                    <span class="dictionary_value">{{ flight?.amount }}</span>
                </div>
            </div>

            <div class="legend">
                <span class="group-title">Detalle de vuelo</span>
            </div>

            <table class="table" mat-table [dataSource]="flight?.scales">
                <ng-container matColumnDef="id">
                    <th mat-header-cell *matHeaderCellDef>Id</th>
                    <td mat-cell *matCellDef="let element" >{{ element?.id }}</td>
                </ng-container>

                <ng-container matColumnDef="airportOriginName">
                    <th mat-header-cell *matHeaderCellDef>Aeropuerto Origen</th>
                    <td mat-cell *matCellDef="let element">{{ element?.airportOriginName }}</td>
                </ng-container>

                <ng-container matColumnDef="airportDestinationName">
                    <th mat-header-cell *matHeaderCellDef>Aeropuerto Destino</th>
                    <td mat-cell *matCellDef="let element">{{ element?.airportDestinationName }}</td>
                </ng-container>

                <ng-container matColumnDef="departureDate">
                    <th mat-header-cell *matHeaderCellDef>Fecha de partida</th>
                    <td mat-cell *matCellDef="let element">{{ element?.departureDate }}</td>
                </ng-container>

                <ng-container matColumnDef="arrivalDate">
                    <th mat-header-cell *matHeaderCellDef>Fecha de llegada</th>
                    <td mat-cell *matCellDef="let element">{{ element?.arrivalDate }}</td>
                </ng-container>

                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
            </table>

        </div>
    </div>
    <hr>
    <div class="d-flex justify-content-between">
        <button matStepperPrevious class="btn btn-outline-secondary">
            <i class="fa fa-thin fa-chevron-left mr-1"></i>
            <span>Anterior</span>
        </button>
        <button (click)="onEmitSave()" [disabled]="getDisabledConditions()" matStepperNext class="btn btn-primary">
            <span>Guardar</span>
            <i class="fa fa-thin fa-chevron-right ml-1"></i>
        </button>
    </div>
</div>
