<div class="spt-form">
    <div class="row">
        <ng-container *ngFor="let filter of filterStates">
            <ng-container [ngSwitch]="filter.type">
                <!-- Boolean Filter -->
                <ng-container *ngSwitchCase="FILTER_TYPE_BOOLEAN">
                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3 switch-widget">
                        <div class="d-flex align-items-center mb-1">
                            <input type="checkbox"
                                   class="mini-check"
                                   [checked]="filter.active"
                                   (change)="onFilterActiveChanged(filter.name, $event)">
                            <p class="form-label">{{ getColumnText(filter.name) | translate }}</p>
                        </div>
                        <label class="switch">
                            <input type="checkbox"
                                   [checked]="filter.value"
                                   (change)="onBooleanFilterChanged(filter.name, $event)">
                            <span class="slider round"></span>
                        </label>
                    </div>
                </ng-container>

                <!-- Text Filter -->
                <ng-container *ngSwitchCase="FILTER_TYPE_TEXT">
                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3">
                        <div class="d-flex align-items-center mb-1">
                            <input type="checkbox"
                               class="mini-check"
                               [checked]="filter.active"
                               (change)="onFilterActiveChanged(filter.name, $event)">
                            <label class="form-label">{{ getColumnText(filter.name) | translate }}</label>
                        </div>
                        <input type="text"
                               class="form-control"
                               [value]="filter.value"
                               (input)="onTextFilterChanged(filter.name, $event)">
                    </div>
                </ng-container>

                <!-- Date Filter -->
                <ng-container *ngSwitchCase="FILTER_TYPE_DATE">
                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3">
                        <div class="d-flex align-items-center mb-1">
                            <input type="checkbox"
                                   class="mini-check"
                                   [checked]="filter.active"
                                   (change)="onFilterActiveChanged(filter.name, $event)">
                            <label class="form-label">{{ getColumnText(filter.name) | translate }}</label>
                        </div>
                        <div class="row">
                            <div class="col-6">
                                <input type="date"
                                       class="form-control"
                                       [value]="filter.value.start"
                                       (change)="onDateFilterChanged(filter.name, 'start', $event)">
                            </div>
                            <div class="col-6">
                                <input type="date"
                                       class="form-control"
                                       [value]="filter.value.end"
                                       (change)="onDateFilterChanged(filter.name, 'end', $event)">
                            </div>
                        </div>
                    </div>
                </ng-container>

                <!-- Number Filter -->
                <ng-container *ngSwitchCase="FILTER_TYPE_NUMBER">
                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3">
                        <div class="d-flex align-items-center mb-1">
                            <input type="checkbox"
                                   class="mini-check"
                                   [checked]="filter.active"
                                   (change)="onFilterActiveChanged(filter.name, $event)">
                            <label class="form-label">{{ getColumnText(filter.name) | translate }}</label>
                        </div>
                        <div class="row">
                            <div class="col-6">
                                <input type="number"
                                       class="form-control"
                                       [value]="filter.value.min"
                                       (input)="onNumberFilterChanged(filter.name, 'min', $event)"
                                       placeholder="Min">
                            </div>
                            <div class="col-6">
                                <input type="number"
                                       class="form-control"
                                       [value]="filter.value.max"
                                       (input)="onNumberFilterChanged(filter.name, 'max', $event)"
                                       placeholder="Max">
                            </div>
                        </div>
                    </div>
                </ng-container>
                <ng-container *ngSwitchCase="FILTER_TYPE_CHECKBOXES">
                    <div class="col-12 mb-3 switch-widget">
                        <div class="d-flex align-items-center mb-1">
                            <input type="checkbox"
                                   class="mini-check"
                                   [checked]="filter.active"
                                   (change)="onFilterActiveChanged(filter.name, $event)">
                            <p class="form-label">{{ getColumnText(filter.name) | translate }}</p>
                        </div>
                        <div class="row">
                            <div *ngFor="let option of filter.options" class="col-12 col-sm-6 col-md-3 col-lg-2 mb-3">
                                <div class="d-flex align-items-center mb-1">
                                    <p class="form-label">{{ option }}</p>
                                </div>
                                <label class="switch">
                                    <input type="checkbox"
                                           [id]="filter.field + '_' + option"
                                           (change)="onCheckboxesFilterChanged(filter.name, option, $event)"
                                           [checked]="filter.value[option]"
                                           class="form-check-input">
                                    <span class="slider round"></span>
                                </label>
                            </div>
                        </div>
                    </div>
<!--                        <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3">-->
<!--                            <input type="checkbox"-->
<!--                                   [id]="filter.field + '_' + option"-->
<!--                                   (change)="onCheckboxesFilterChanged(filter.field, option, $event, filter.subResource)"-->
<!--                                   [checked]="filter.value[option]"-->
<!--                                   class="form-check-input">-->
<!--                            <label [for]="filter.field + '_' + option" class="form-check-label">-->
<!--                                {{ option }}-->
<!--                            </label>-->
<!--                        </div>-->
                </ng-container>
            </ng-container>
        </ng-container>
    </div>
    <div class="row mb-3">
        <div class="col-12 d-flex justify-content-end">
            <button (click)="saveFilterConfig()" class="btn btn-primary me-3">{{ 'basic.saveSettings' | translate }}</button>
            <button (click)="resetAllFilters()" class="btn btn-primary">{{ 'basic.resetFilters' | translate }}</button>
        </div>
    </div>
</div>
