<div class="transition">
    <text weight="medium" color="light-gray" size="12" class="transition__title">
        {{ title | translate }}
    </text>

    <flight-status class="transition__status" [status]="transition.status"></flight-status>

    <captioned-time-group class="transition__beginning-time" [times]="transition.start" caption="SHARED.TIME-START"></captioned-time-group>

    <captioned-time-group class="transition__finish-time" [times]="transition.end" caption="SHARED.TIME-END"></captioned-time-group>

    <property [wrappable]="true" [ngClass]="gatePropertyClasses" description="{{ 'SHARED.NUMBER-EXIT' | translate }}" *ngIf="gate">
        <text weight="medium">{{ gate }}</text>
    </property>

    <property
        [wrappable]="true"
        [ngClass]="dispatchPropertyClasses"
        description="{{ 'SHARED.LANDING-TRANSFER' | translate }}"
        *ngIf="dispatch"
    >
        <text weight="medium">{{ 'DISPATCH.' + dispatch | translate }}</text>
    </property>

    <property [wrappable]="true" [ngClass]="bagBeltPropertyClasses" *ngIf="bagBelt" description="{{ 'SHARED.BAGBELT' | translate }}">
        <text weight="medium">{{ bagBelt }}</text>
    </property>
</div>
