<div class="flight">
    <div class="flight-number" data-testid="flight-carrier-number">
        <div>{{ flight | flightNumber }}</div>
        <div class="status description">
            {{ 'FLIGHT-STATUSES.' + flight.status | translate }}
        </div>
    </div>

    <operator-logo-and-model [flight]="flight" [showModel]="expanded && flight.routeType !== 'MultiLeg'"></operator-logo-and-model>

    <time-group [actual]="departureBlockOffTimes" [scheduled]="departure._times.scheduledDeparture"></time-group>

    <station [station]="$any(departure)"></station>

    <div class="flight-status">
        <flight-status-icon [status]="flight.status"></flight-status-icon>
        <div class="status">
            {{ 'FLIGHT-STATUSES.' + flight.status | translate }}
        </div>
    </div>

    <time-group
        class="arrival-time"
        dayChangePosition="absolute"
        align="mobile-right"
        [actual]="arrivalBlockOnTimes"
        [scheduled]="arrival._times.scheduledArrival"
    ></time-group>

    <station [station]="$any(arrival)" align="mobile-right"></station>

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

<div class="icons-row" *ngIf="changeRoute || reroute || (!flight.expanded && flight.boardings >= 1)">
    <flight-events
        [direction]="flightEventsDirection"
        [reroute]="reroute"
        [showDescription]="flight.expanded"
        [changeRoute]="changeRoute"
    ></flight-events>
    <transfer-inline *ngIf="!flight.expanded && flight.boardings >= 1" class="intermediateLanding" [flights]="[flight]"></transfer-inline>
</div>
