<div class="k-leg">
    <section-number [number]="crossIndex"></section-number>

    <div class="k-leg-flight-number">
        <span>{{ flight | flightNumber }}</span>
    </div>

    <operator-logo-and-model [flight]="flight"></operator-logo-and-model>

    <time-group class="departure-time-group" [scheduled]="leg.departure._times.scheduledDeparture" size="medium"></time-group>

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

    <div class="k-leg-duration">
        <span class="description">{{ leg.scheduledDuration | duration }}</span>
    </div>

    <time-group
        class="arrival-time-group"
        [scheduled]="leg.arrival._times.scheduledArrival"
        size="medium"
        dayChangeLayout="mobile-left"
    ></time-group>

    <station class="arrival-station" [station]="$any(leg.arrival)" align="mobile-right"></station>
</div>
<code-sharing [leg]="leg" *ngIf="leg.hasCodesharing"></code-sharing>
