<div class="search-container">
    <div class="recent-search">
        <mat-icon>search</mat-icon>
        <input
            #searchInput
            type="search"
            spellcheck="false"
            autocomplete="off"
            [placeholder]="placeholder"
            [ngModel]="searchTerm()"
            (ngModelChange)="onSearchTermChange()"
        />
        @if (searchTerm()) {
            <button mat-icon-button class="clear-btn" (click)="clearSearch()">
                <mat-icon>close</mat-icon>
            </button>
        }
    </div>

    @if (filterConfig.length > 0) {
        <div class="type-filters">
            @for (filter of filterConfig; track filter.key) {
                <mat-checkbox
                    [(ngModel)]="filters[filter.key]"
                    (ngModelChange)="onFilterChange(filter.key)"
                >
                    @if (filter.translationKey) {
                        {{ filter.translationKey | translate }}
                    } @else {
                        {{ filter.label }}
                    }
                </mat-checkbox>
            }
        </div>
    }
</div>
