<section class="frame">
    <p-accordion expandIcon="" collapseIcon="" [activeIndex]="0">
        <p-accordionTab [selected]="true" [disabled]="true">
            <div
                class="schedule-filter-content schedule-filter-content--cities"
            >
                <city-autocomplete
                    name="departureCity"
                    label="SHARED.DEPARTURE_CITY"
                    [(ngModel)]="departure"
                    [(error)]="validationService.departureError"
                    placeholder="SHARED.CITY_PLACEHOLDER"
                    data-testid="schedule-departure-city-input"
                ></city-autocomplete>

                <div class="change-container">
                    <button
                        class="button-change"
                        pButton
                        type="button"
                        (click)="exchange()"
                    >
                        <svg class="svg--change-city">
                            <use
                                xlink:href="/assets/img/sprite.svg#changeCity"
                            />
                        </svg>
                    </button>
                </div>

                <city-autocomplete
                    name="arrivalCity"
                    label="SHARED.ARRIVAL_CITY"
                    [(ngModel)]="arrival"
                    [(error)]="validationService.arrivalError"
                    placeholder="SHARED.CITY_PLACEHOLDER"
                    data-testid="schedule-arrival-city-input"
                >
                </city-autocomplete>
            </div>

            <div
                class="schedule-filter-content schedule-filter-content--direct"
            >
                <calendar-input-week
                    label="SHARED.SCHEDULES_DATE"
                    [readonly]="true"
                    [error]="validationService.dateRangeError"
                    [(ngModel)]="dateRange"
                    (ngModelChange)="resetDateRangeError()"
                    [minDate]="settings.scheduleMinDate"
                    [maxDate]="maxScheduleDate"
                    [disabledDates]="disabledDates"
                    data-testid="schedule-calendar"
                >
                </calendar-input-week>

                <time-selector
                    [fullView]="false"
                    [(ngModel)]="timeRange"
                    label="{{ 'SHARED.DEPARTURE_TIME' | translate }}"
                ></time-selector>
            </div>

            <div
                class="
                    schedule-filter-content schedule-filter-content--checkboxes
                "
            >
                <p-checkbox
                    [binary]="true"
                    [(ngModel)]="directOnly"
                    label="{{ 'SHARED.DIRECT_FLIGHT_ONLY' | translate }}"
                ></p-checkbox>
                <p-checkbox
                    [binary]="true"
                    [(ngModel)]="withReturn"
                    (ngModelChange)="resetReturnDateRange()"
                    label="{{ 'SHARED.RETURN_FLIGHT_VIEW' | translate }}"
                >
                </p-checkbox>
            </div>

            <div
                *ngIf="withReturn"
                class="schedule-filter-content schedule-filter-content--back"
            >
                <calendar-input-week
                    label="SHARED.RETURN_FLIGHT_DATE"
                    [(ngModel)]="returnDateRange"
                    (ngModelChange)="resetReturnDateRangeError()"
                    [error]="validationService.returnDateRangeError"
                    [minDate]="minReturnScheduleDate"
                    [maxDate]="settings.scheduleMaxDate"
                    [disabledDates]="disabledDatesReturn"
                >
                </calendar-input-week>

                <time-selector
                    [fullView]="false"
                    label="{{ 'SHARED.RETURN_FLIGHT_TIME' | translate }}"
                    [(ngModel)]="returnTimeRange"
                >
                </time-selector>
            </div>

            <div class="schedule-fiter-buttons">
                <button
                    class="search-button color blue-light"
                    pButton
                    type="button"
                    label="{{ 'SHARED.SCHEDULES_VIEW' | translate }}"
                    (click)="viewSchedule()"
                    data-testid="schedule-search-button"
                ></button>
            </div>
        </p-accordionTab>
    </p-accordion>
</section>
