<div class="filter-content">
    <div class="p-field">
        <label class="label--filter">{{
            'SHARED.FLIGHT_NUMBER' | translate
        }}</label>
        <tooltip *ngIf="validationService.flightNumberError">{{
            validationService.flightNumberError | translate
        }}</tooltip>

        <div
            class="number-input-composite"
            [ngClass]="{
                'has-value': flightNumber,
                'has-error': validationService.flightNumberError
            }"
        >
            <div class="prefix">SU</div>
            <input
                pInputText
                type="text"
                class="input--filter input--flight-number ui-inputtext"
                [(ngModel)]="flightNumber"
                (change)="addZeros()"
                autocomplete="off"
                maxlength="5"
                placeholder="{{
                    'SHARED.FLIGHT_NUMBER_PLACEHOLDER' | translate
                }}"
                data-testid="flight-number-input"
            />
            <button
                pButton
                label=" "
                class="button-clear"
                (click)="clearInput()"
                data-testid="flight-number-clear-button"
            ></button>
        </div>
    </div>

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

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