<div class="p-print-block flight-route__status" *ngIf="leg">
    <div [ngStyle]="{ 'width.%': leg.flightPercent }" *ngIf="inFlight">
        <div [ngClass]="inFlightStatusClasses">
            <div class="flight-route__in-flight-status-text-container">
                <div class="flight-route__in-flight-status-text">
                    {{ 'FLIGHT-STATUSES.' + leg.status | translate }}
                </div>
            </div>
        </div>
    </div>

    <div *ngIf="finished">
        <div class="status--text-right description" style="margin-left: auto; text-align: right">
            {{ 'FLIGHT-STATUSES.' + leg.status | translate }}
        </div>
    </div>

    <div *ngIf="starting">
        <div class="status--text-left description" style="margin-left: auto; text-align: left">
            {{ 'FLIGHT-STATUSES.' + leg.status | translate }}
        </div>
    </div>

    <div class="status--line">
        <div class="status--execute" [ngStyle]="{ 'width.%': leg.flightPercent }">
            <flight-status-icon [status]="flight.isMultiLeg ? leg.status : flight.leg.status"></flight-status-icon>
        </div>
    </div>
    <div *ngIf="inFlight" class="status--texts">
        <div *ngIf="leg.duration" class="status--text-left description">
            {{ 'SHARED.TRAVEL-TIME' | translate }}
            <div>{{ leg.duration | duration }}</div>
        </div>
        <div *ngIf="leg.remainingFlightDuration" class="status--text-right description">
            {{ 'SHARED.TIME-LEFT' | translate }}
            <div>
                {{ remainingFlightDuration | duration }}
            </div>
        </div>
    </div>
</div>
