<div class="filter-content">
    <city-autocomplete
        label="SHARED.DEPARTURE_CITY"
        [(ngModel)]="departure"
        [(error)]="validationService.departureError"
        [placeholder]="departurePlaceholder"
        data-testid="route-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
        label="SHARED.ARRIVAL_CITY"
        [(ngModel)]="arrival"
        [(error)]="validationService.arrivalError"
        [placeholder]="arrivalPlaceholder"
        data-testid="route-arrival-city-input"
    ></city-autocomplete>

    <calendar-input
        label="SHARED.FLIGHT_DATE"
        [(ngModel)]="date"
        [error]="validationService.dateError"
        [minDate]="minDate"
        [maxDate]="maxDate"
        [disabledDates]="disabledDates"
        data-testid="route-calendar-input"
    >
    </calendar-input>
</div>

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

<div class="filter-button">
    <button
        class="search-button color blue-light"
        pButton
        type="button"
        label="{{ 'SHARED.SEARCH' | translate }}"
        (click)="search()"
        data-testid="route-search-button"
    ></button>
</div>
