<div class="schedule-direction-switch">
    <button
        class="hide-button-label"
        pButton
        type="button"
        [ngClass]="getClass(Direction.OUTBOUND)"
        (click)="setDirection(Direction.OUTBOUND)"
        pTooltip="{{ 'SHARED.DIRECT_FLIGHTS' | translate }}"
        tooltipPosition="top"
        tooltipStyleClass="afl-tooltip"
    >
        <svg
            class="schedule-direction-switch__icon"
            [ngStyle]="getIconStyles(Direction.OUTBOUND)"
        >
            <use xlink:href="/assets/img/sprite.svg#plane" />
        </svg>
        {{ 'SHARED.DIRECT_FLIGHTS' | translate }}
    </button>
    <button
        class="hide-button-label"
        pButton
        type="button"
        [ngClass]="getClass(Direction.INBOUND)"
        (click)="setDirection(Direction.INBOUND)"
        pTooltip="{{ 'SHARED.RETURN_FLIGHTS' | translate }}"
        tooltipPosition="top"
        tooltipStyleClass="afl-tooltip"
    >
        <svg
            class="schedule-direction-switch__icon"
            style="transform: rotate(180deg)"
            [ngStyle]="getIconStyles(Direction.INBOUND)"
        >
            <use xlink:href="/assets/img/sprite.svg#plane" />
        </svg>
        {{ 'SHARED.RETURN_FLIGHTS' | translate }}
    </button>
</div>
