<ng-container *localisationReady>
    <page-layout>
        <ng-container title>
            <ng-content select="[title]"></ng-content>
        </ng-container>
        <div header-left>
            <spin-lock *ngIf="loading"></spin-lock>
            <flights-page-tabs
                [viewType]="ViewType.Schedule"
            ></flights-page-tabs>
        </div>
        <div content-left>
            <schedule-filter></schedule-filter>
            <search-history></search-history>
        </div>

        <card [roundedTop]="true" sticky-content class="schedule-controls">
            <spin-lock *ngIf="loading"></spin-lock>
            <week-tabs
                class="schedule-controls__tabs"
                [selectedDate]="selectedDate"
                [dateTo]="settings.scheduleMaxDate"
                [dateFrom]="settings.scheduleMinDate"
                [minDate]="minScheduleDate"
                [maxDate]="maxScheduleDate"
                (tabClick)="handleDateChanged($event)"
                caption="SHARED.SCHEDULES_DATE"
            ></week-tabs>

            <div class="schedule-home-page-header" *ngIf="withReturnFlights">
                <schedule-direction-switch
                    [direction]="direction"
                    (directionChange)="handleDirectionChange($event)"
                ></schedule-direction-switch>
            </div>
            <div
                class="schedule-home-page-header-border"
                *ngIf="withReturnFlights"
            ></div>
            <time-selector
                *ngIf="this.isDirect && featureFlags.RESULTS_TIME_SELECTOR"
                [(ngModel)]="timeRange"
                [fullView]="true"
                [step]="10"
                label="{{ 'BOARD.TIME_DEPARTURE' | translate }}"
                (slideComplete)="handleTimeChanged()"
            >
            </time-selector>
            <time-selector
                *ngIf="!this.isDirect && featureFlags.RESULTS_TIME_SELECTOR"
                [(ngModel)]="returnTimeRange"
                [fullView]="true"
                [step]="10"
                label="{{ 'BOARD.TIME_DEPARTURE' | translate }}"
                (slideComplete)="handleReturnTimeChanged()"
            >
            </time-selector>
            <schedule-search-result-header
                *ngIf="!isCurrentScheduleEmpty || loading"
                [(sortBy)]="sortBy"
            ></schedule-search-result-header>
        </card>
        <ng-container>
            <page-loader
                *ngIf="loading"
                (searchCancel)="handleCancelEvent()"
            ></page-loader>
            <schedule-days
                [sortBy]="sortBy"
                [isDirect]="isDirect"
                *ngIf="!loading && !isCurrentScheduleEmpty"
                [schedule]="currentSchedule"
                (toDetails)="handleToDetailsEvent($event)"
            ></schedule-days>
            <page-empty-list
                *ngIf="!loading && isCurrentScheduleEmpty"
            ></page-empty-list>
            <page-footer-notes *ngIf="!loading"></page-footer-notes>
        </ng-container>
    </page-layout>
</ng-container>
