<ng-container *ngIf="transfer.type">
    <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">
        <span class="transfer-type">{{
            [transfer] | transferType: transfer.type
        }}</span>

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

        <div class="transfer-times description">
            <time-group-legacy [times]="arrivalTimes"></time-group-legacy>
            <span> — </span>
            <time-group-legacy [times]="departureTimes"></time-group-legacy>
        </div>

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