<section class="frame">
    <p-accordion
        (onOpen)="handleOpen($event)"
        (onClose)="handleClose()"
        expandIcon=""
        collapseIcon=""
    >
        <p-accordionTab
            [selected]="isSelected('flight')"
            data-testid="flight-filter"
        >
            <p-header>
                {{ 'BOARD.FLIGHT_NUMBER' | translate }}
                <arrow-down-icon
                    [color]="getIconColor('flight')"
                    [rotated]="isSelected('flight')"
                ></arrow-down-icon>
            </p-header>
            <online-board-flight-number-filter
                [minDate]="settings.boardMinDate"
                [maxDate]="settings.boardMaxDate"
                (onSearch)="handleFlightNumberSearch($event)"
            ></online-board-flight-number-filter>
        </p-accordionTab>
        <p-accordionTab
            [selected]="isSelected('route')"
            data-testid="route-filter"
        >
            <p-header>
                {{ 'BOARD.ROUTE' | translate }}
                <arrow-down-icon
                    [color]="getIconColor('route')"
                    [rotated]="isSelected('route')"
                ></arrow-down-icon>
            </p-header>
            <online-board-route-filter
                [minDate]="settings.boardMinDate"
                [maxDate]="settings.boardMaxDate"
                (onSearch)="handleRouteSearch($event)"
            ></online-board-route-filter>
        </p-accordionTab>
    </p-accordion>
</section>
