<ng-container *ngIf="legs.length > index">
    <arrow-down-icon
        class="k-timeline-navigation"
        role="previous"
        *ngIf="index > 0"
        (click)="previous()"
    ></arrow-down-icon>
    <div class="k-timeline-content">
        <div class="k-timeline">
            <div class="k-timeline-point">
                <time-group
                    [actual]="getDepartureActualTimesSet(index)"
                    [scheduled]="getDepartureScheduledTimesSet(index)"
                    size="medium"
                ></time-group>
            </div>

            <div class="k-timeline-section">
                <div class="k-separator"></div>

                <section-number
                    [small]="true"
                    [number]="index + 1"
                ></section-number>

                <div class="k-timeline-duration description">
                    {{ legs[index] | legDuration: canChange }}
                </div>

                <div class="k-separator"></div>
            </div>

            <div class="k-timeline-point">
                <time-group
                    [actual]="getArrivalActualTimesSet(index)"
                    [scheduled]="getArrivalScheduledTimesSet(index)"
                    align="right"
                    size="medium"
                ></time-group>

                <div class="k-separator"></div>

                <transfer-time
                    class="description"
                    [arrival]="legs[index]?.arrival?.times"
                    [departure]="legs[index + 1]?.departure?.times"
                    [type]="getType()"
                ></transfer-time>

                <div class="k-separator"></div>

                <time-group
                    [actual]="getDepartureActualTimesSet(index + 1)"
                    [scheduled]="getDepartureScheduledTimesSet(index + 1)"
                    size="medium"
                ></time-group>
            </div>

            <div class="k-timeline-section">
                <div class="k-separator"></div>

                <section-number
                    [small]="true"
                    [number]="index + 2"
                ></section-number>

                <div
                    class="k-timeline-duration description"
                    [class.timeline-duration--specifying]="
                        isSpecifying(legs[index + 1])
                    "
                >
                    {{ legs[index + 1] | legDuration: canChange }}
                </div>

                <div class="k-separator"></div>
            </div>
            <div class="k-timeline-point">
                <time-group
                    [actual]="getArrivalActualTimesSet(index + 1)"
                    [scheduled]="getArrivalScheduledTimesSet(index + 1)"
                    align="right"
                    size="medium"
                ></time-group>
            </div>
        </div>

        <div class="k-timeline">
            <station
                class="time-line-station"
                align="left"
                size="medium"
                [station]="$any(legs[index].departure)"
            ></station>
            <station-change
                class="time-line-station time-line-station--change"
                [from]="$any(legs[index].arrival)"
                [to]="$any(legs[index + 1].departure)"
            ></station-change>
            <station
                class="time-line-station"
                align="right"
                size="medium"
                [station]="$any(legs[index + 1].arrival)"
            ></station>
        </div>
    </div>
    <arrow-down-icon
        class="k-timeline-navigation"
        role="next"
        *ngIf="index < legs.length - 2"
        (click)="next()"
    ></arrow-down-icon>
</ng-container>
