@if (filters.length>0){

    <section class="toolbar-filter-container">
        @for (filter of filters; track filter) {
            @if (filter.main){
                @switch (filter.type) {     
                    @case (FILTER_TYPE.AUTOCOMPLETE) {
                        <kit-toolbar-filter-autocomplete [filterForm]="getFilterForm(filter)" [filter]="getFilter(filter)"></kit-toolbar-filter-autocomplete>
                    } 
                    @case (FILTER_TYPE.SELECT) {
                        <kit-toolbar-filter-select [filterForm]="getFilterForm(filter)" [filter]="getFilter(filter)"></kit-toolbar-filter-select>
                    }
                    @case (FILTER_TYPE.INPUT) {
                        <kit-toolbar-filter-input [filterForm]="getFilterForm(filter)" [filter]="getFilter(filter)"></kit-toolbar-filter-input>
                    }
                    @case (FILTER_TYPE.DATE) {
                        <div class="date-picker-flex">
                            <kit-toolbar-filter-date [filterForm]="getFilterForm(filter)" [filter]="getFilter(filter)"></kit-toolbar-filter-date>
                        </div> 
                    } 
                    @case (FILTER_TYPE.SELECT_STATE) {
                        <kit-toolbar-filter-select-state [filterForm]="getFilterForm(filter)" [filter]="getFilter(filter)"></kit-toolbar-filter-select-state>
                    }
                }
            }     
        }
        @if (showFilterButton()) {
            <div class="toolbar-filter-button-container">
                <button
                [ngClass]="filtersCount > 0 ? 'btn-primary-filter' : 'btn-cancel'"
                (click)="onAction()"
                >
                    <lucide-angular matPrefix  size="20" [img]="iconFilter" [color]="filtersCount > 0 ?'#5B62DA':'#5D6F85'" ></lucide-angular> 
                    <mat-label>Filtros <span>{{filtersCount}}</span></mat-label>
                </button>
            </div>
        }
    </section>

}