<div class="flight schedule-flight-header" *ngIf="flights">
    <div class="flight-number" data-testid="flight-number">
        <span>{{ flight | flightNumber }}</span>
    </div>

    <div class="operator-logos" data-testid="flight-carrier">
        <!--7841, 7891-->
        <operator-logo-and-model
            [flight]="flights[0]"
            [showModel]="expanded && direct"
            [round]="!expanded || !direct"
            modelAlign="mobile-right"
        ></operator-logo-and-model>
        <!--7841, 7891-->
        <operator-logo-and-model
            *ngIf="flights[1]"
            [showModel]="expanded && direct"
            [flight]="flights[1]"
            [round]="!expanded || connecting"
        ></operator-logo-and-model>
    </div>

    <time-group class="schedule-flight-header__departure-time" [scheduled]="departure.departure._times.scheduledDeparture"></time-group>

    <station class="schedule-flight-header__departure-station" [station]="$any(departure.departure)"></station>

    <div class="flight-time">
        <span class="time">{{ flight.duration | duration }}</span>
    </div>

    <time-group
        class="schedule-flight-header__arrival-time"
        [scheduled]="arrival.arrival._times.scheduledArrival"
        align="mobile-right"
    ></time-group>

    <station class="schedule-flight-header__arrival-station" [station]="$any(arrival.arrival)" align="mobile-right"></station>

    <arrow-down-icon [ngClass]="arrowIconClasses" [rotated]="expanded"></arrow-down-icon>
</div>

<div class="transfer-container" *ngIf="!flight.expanded && flight.boardings >= 1">
    <transfer-inline class="intermediateLanding" [flights]="routeType === RouteType.MultiLeg ? [flight] : flight.flights"></transfer-inline>
</div>
