<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <mat-horizontal-stepper labelPosition="bottom" #stepper [linear]="true">

                        <mat-step state="vuelo">
                            <ng-template matStepLabel>
                                <span class="font-bold">{{'vuelo.title' | translate}}</span>
                                <div class="font-size-description"
                                    [title]="'label.general-information.description' | translate">
                                    {{'vuelo.description' | translate}}
                                </div>
                            </ng-template>
                            <byte-information [stepper]="stepper"
                                (nextPage)="updateDirtyStatus($event)"></byte-information>
                        </mat-step>
                        <mat-step state="escala">
                            <ng-template matStepLabel>
                                <span class="font-bold">{{'escala.title' | translate}}</span>
                                <div class="font-size-description" [title]="'label.questions.description' | translate">
                                    {{'escala.description' | translate}}
                                </div>
                            </ng-template>
                            <byte-escala [stepper]="stepper" (nextPage)="updateDirtyStatus($event)"></byte-escala>
                        </mat-step>

                        <mat-step state="costo">
                            <ng-template matStepLabel>
                                <span class="font-bold">{{'costo.title' | translate}}</span>
                                <div class="font-size-description"
                                    [title]="'label.deployment-channels.description' | translate">
                                    {{'costo.description' | translate}}
                                </div>
                            </ng-template>
                            <byte-costos [stepper]="stepper" (flag)="updateValue($event)" (nextPage)="updateDirtyStatus($event)"></byte-costos>
                        </mat-step>
                        <ng-template matStepperIcon="vuelo">
                            <mat-icon>info</mat-icon>
                        </ng-template>
                        <ng-template matStepperIcon="escala">
                            <mat-icon>dns</mat-icon>
                        </ng-template>
                        <ng-template matStepperIcon="costo">
                            <mat-icon>chat</mat-icon>
                        </ng-template>
                    </mat-horizontal-stepper>
                </div>
            </div>
        </div>
    </div>
</div>