<section>
    <p-accordion expandIcon="" collapseIcon="" [activeIndex]="0">
        <p-accordionTab [selected]="true" [disabled]="true">
            <div class="flights-map-filter-content">
                
                <div class="flights-map-filter-header">
                    <h3>{{ 'FLIGHTS-MAP.ROUTE' | translate }}</h3>
                </div>

                <div class="flights-map-filter-content-cities">
                    <city-autocomplete
                        label="SHARED.DEPARTURE_CITY"
                        [(ngModel)]="departure"
                        [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"
                        [placeholder]="arrivalPlaceholder"
                        data-testid="route-arrival-city-input"
                    ></city-autocomplete>
                </div>


                <div class="flights-map-filter-info">
                    <p>{{'FLIGHTS-MAP.FILTER_INFO' | translate}}</p>
                </div>
                
                <div class="flights-map-filter-content-checkboxes">

                    <toggle-switch 
                        [disabled]="departure ? false : true"
                        [(ngModel)]="domestic"
                        label="{{ 'FLIGHTS-MAP.DOMESTIC_FLIGHTS' | translate }}">
                    </toggle-switch>

                    <toggle-switch 
                        [disabled]="departure ? false : true"
                        
                        [(ngModel)]="international" 
                        label="{{ 'FLIGHTS-MAP.INTERNATIONAL_FLIGHTS' | translate }}">
                    </toggle-switch>

                    <toggle-switch
                        [disabled]="departure && arrival ? false : true"
                        [(ngModel)]="connections" 
                        label="{{ 'FLIGHTS-MAP.CONNECTING_FLIGHTS' | translate }}">
                    </toggle-switch>
                    
                </div>

                <div class="flighs-map-filter-date">
                        <calendar-input
                            label="SHARED.FLIGHT_DATE"
                            [(ngModel)]="date"
                            
                            [minDate]="minDate"
                            [maxDate]="maxDate"
                            [disabledDates]="disabledDates"
                            data-testid="route-calendar-input"
                        >
                        </calendar-input>
                </div>

            </div>

        </p-accordionTab>
    </p-accordion>
</section>