<div class="compact-filter">
  <div class="filter-header" (click)="toggleFilter()">
    <span class="filter-label" *ngIf="filterLabel">{{ filterLabel }}</span>
    <span class="filter-key" *ngIf="!filterLabel && filterKey">{{ filterKey }}</span>
    <span class="filter-type">({{ filterType }})</span>
    <clr-icon shape="caret down" class="expand-icon" *ngIf="!isExpanded"></clr-icon>
    <clr-icon shape="caret up" class="expand-icon" *ngIf="isExpanded"></clr-icon>
  </div>

  <div class="filter-content" *ngIf="isExpanded">
    <!-- Text Filter -->
    <div class="filter-control" *ngIf="filterType === 'text'">
      <input type="text" 
             [(ngModel)]="filterValue" 
             (ngModelChange)="onFilterValueChange($event)"
             [placeholder]="filterLabel || filterKey"
             class="clr-input compact-input">
    </div>

    <!-- Dropdown Filter -->
    <div class="filter-control" *ngIf="filterType === 'dropdown'">
      <select [(ngModel)]="filterValue" 
              (ngModelChange)="onFilterValueChange($event)"
              class="clr-select compact-select">
        <option value="">{{ filterLabel || filterKey }}</option>
        <option *ngFor="let option of filterOptions; let i = index" [value]="option">{{ option }}</option>
      </select>
    </div>

    <!-- Multi-Select Filter -->
    <div class="filter-control" *ngIf="filterType === 'multiselect'">
      <div class="multiselect-container">
        <div class="checkbox-group">
          <div *ngFor="let option of filterOptions; let i = index" class="checkbox-item">
            <input type="checkbox" 
                   [checked]="isOptionSelected(option)" 
                   (change)="onMultiSelectChange(option, $event)"
                   [id]="'checkbox-' + filterKey + '-' + i" 
                   class="clr-checkbox">
            <label [for]="'checkbox-' + filterKey + '-' + i" class="checkbox-label">{{ option }}</label>
          </div>
        </div>
      </div>
    </div>

    <!-- Date Range Filter -->
    <div class="filter-control date-range" *ngIf="filterType === 'date-range'">
      <div class="date-input-group">
        <input type="date" 
               [(ngModel)]="filterValue.start" 
               (ngModelChange)="onDateRangeChange({ start: $event, end: filterValue.end })"
               placeholder="Start Date"
               class="clr-input compact-date">
        <span class="date-separator">to</span>
        <input type="date" 
               [(ngModel)]="filterValue.end" 
               (ngModelChange)="onDateRangeChange({ start: filterValue.start, end: $event })"
               placeholder="End Date"
               class="clr-input compact-date">
      </div>
    </div>

    <!-- Toggle Filter -->
    <div class="filter-control toggle" *ngIf="filterType === 'toggle'">
      <input type="checkbox" 
             [(ngModel)]="filterValue" 
             (ngModelChange)="onToggleChange($event)"
             clrToggle 
             class="clr-toggle">
      <label class="toggle-label">{{ filterLabel || filterKey }}</label>
    </div>
  </div>
</div>