<ng-container *ngIf="transfer.type">
    <div class="transfer-box">
        <div class="transfer-icon">
            <svg class="svg" [ngSwitch]="transfer.type">
                <use
                    *ngSwitchCase="RouteType.MultiLeg"
                    xlink:href="/assets/img/sprite.svg#intermediate-landing"
                />
                <use
                    *ngSwitchCase="RouteType.Connecting"
                    xlink:href="/assets/img/sprite.svg#flight-transfer"
                />
            </svg>
        </div>

        <div class="transfer-content">
            <div class="transfer-caption" [ngSwitch]="transfer.type">
                <span *ngSwitchCase="RouteType.MultiLeg">{{
                    'SHARED.INTERMEDIATE-LANDING-PLURAL-ONE' | translate
                }}</span>
                <span *ngSwitchCase="RouteType.Connecting">{{
                    'SHARED.FLIGHT-TRANSFER' | translate
                }}</span>
            </div>

            <div class="transfer-time">
                <div class="icon">
                    <img src="/assets/img/time-orange.svg" />
                </div>
                <transfer-time
                    [arrival]="transfer?.arrival?.times"
                    [departure]="transfer?.departure?.times"
                    [type]="'actual'"
                ></transfer-time>
            </div>

            <transfer-section
                [transfer]="transfer"
                [hideDeparture]="transfer.stationChange === 'noChange'"
            ></transfer-section>
        </div>
    </div>
</ng-container>
