<div class="schedule-search-result-header">
    <div class="schedule-search-result-header__flight">
        <div class="sort-label">
            {{ 'SCHEDULE.SEARCH-RESULT-FLIGHT' | translate }}
        </div>
    </div>
    <div class="schedule-search-result-header__company">
        <div class="sort-label">
            {{ 'SCHEDULE.SEARCH-RESULT-COMPANY' | translate }}
        </div>
    </div>
    <div class="schedule-search-result-header__departure">
        <div class="sort-label label-note">
            {{ 'SCHEDULE.SEARCH-RESULT-DEPARTURE' | translate }}
            <div class="sort-note">{{ footnotes }}</div>
        </div>
        <div class="sort-container">
            <button pButton type="button" #departureUp class="sort sort--up" (click)="onSort(ScheduleSortMode.departureUp)" [ngClass]="{ active: sortBy === ScheduleSortMode.departureUp }">
                <svg class="svg--arrow">
                    <use xlink:href="/assets/img/sprite.svg#arrow-up" />
                </svg>
            </button>

            <button pButton type="button" #departureDown class="sort sort--down" (click)="onSort(ScheduleSortMode.departureDown)" [ngClass]="{ active: sortBy === ScheduleSortMode.departureDown }">
                <svg class="svg--arrow">
                    <use xlink:href="/assets/img/sprite.svg#arrow-down" />
                </svg>
            </button>
        </div>
    </div>
    <div class="schedule-search-result-header__time">
        <div class="sort-label">
            {{ 'SCHEDULE.SEARCH-RESULT-TIME' | translate }}
        </div>
        <div class="sort-container">
            <button pButton type="button" #timeUp class="sort sort--up" (click)="onSort(ScheduleSortMode.timeUp)" [ngClass]="{ active: sortBy === ScheduleSortMode.timeUp }">
                <svg class="svg--arrow">
                    <use xlink:href="/assets/img/sprite.svg#arrow-up" />
                </svg>
            </button>

            <button pButton type="button" #timeDown class="sort sort--down" (click)="onSort(ScheduleSortMode.timeDown)" [ngClass]="{ active: sortBy === ScheduleSortMode.timeDown }">
                <svg class="svg--arrow">
                    <use xlink:href="/assets/img/sprite.svg#arrow-down" />
                </svg>
            </button>
        </div>
    </div>
    <div class="schedule-search-result-header__arrival">
        <div class="sort-label label-note">
            {{ 'SCHEDULE.SEARCH-RESULT-ARRIVAL' | translate }}
            <div class="sort-note">{{ footnotes }}</div>
        </div>
        <div class="sort-container">
            <button pButton type="button" #arrivalUp class="sort sort--up" (click)="onSort(ScheduleSortMode.arrivalUp)" [ngClass]="{ active: sortBy === ScheduleSortMode.arrivalUp }">
                <svg class="svg--arrow">
                    <use xlink:href="/assets/img/sprite.svg#arrow-up" />
                </svg>
            </button>

            <button pButton type="button" #arrivalDown class="sort sort--down" (click)="onSort(ScheduleSortMode.arrivalDown)" [ngClass]="{ active: sortBy === ScheduleSortMode.arrivalDown }">
                <svg class="svg--arrow">
                    <use xlink:href="/assets/img/sprite.svg#arrow-down" />
                </svg>
            </button>
        </div>
    </div>
</div>
