<div style="display: block;">
  <div class="dg-wrapper">
    <!-- Filter Controls Section -->
    <div class="filter-section" *ngIf="hasActiveFilters()">
      <!-- Base Filters -->
      <div class="filter-group" *ngIf="baseFilters && baseFilters.length > 0">
        <h4>Base Filters</h4>
        <div class="filter-controls">
          <div *ngFor="let filter of baseFilters" class="filter-item">
            <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
            
            <!-- Text Filter -->
            <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
              <input type="text" 
                     [(ngModel)]="filter.value" 
                     (ngModelChange)="onBaseFilterChange(filter)"
                     [placeholder]="filter.field"
                     class="clr-input filter-text-input">
            </div>
            
            <!-- Dropdown Filter -->
            <div *ngIf="filter.type === 'dropdown'" class="filter-input">
              <select [(ngModel)]="filter.value" 
                      (ngModelChange)="onBaseFilterChange(filter)"
                      class="clr-select filter-select">
                <option value="">Select {{ filter.field }}</option>
                <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
              </select>
            </div>
            
            <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
            <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
              <div class="multiselect-display" (click)="toggleMultiselect(filter, 'base')">
                <span class="multiselect-label">{{ filter.field }}</span>
                <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
                  ({{ getSelectedOptionsCount(filter) }} selected)
                </span>
                <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
              </div>
              <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'base')">
                <div class="checkbox-group">
                  <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
                    <input type="checkbox" 
                           [checked]="isOptionSelected(filter, option)" 
                           (change)="onMultiSelectChange(filter, option, $event)"
                           [id]="'base-' + filter.field + '-' + i" 
                           class="clr-checkbox">
                    <label [for]="'base-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- Date Range Filter -->
            <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
              <div class="date-input-group">
                <input type="date" 
                       [(ngModel)]="filter.value.start" 
                       (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
                       placeholder="Start Date"
                       class="clr-input filter-date">
                <span class="date-separator">to</span>
                <input type="date" 
                       [(ngModel)]="filter.value.end" 
                       (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
                       placeholder="End Date"
                       class="clr-input filter-date">
              </div>
            </div>
            
            <!-- Toggle Filter -->
            <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
              <input type="checkbox" 
                     [(ngModel)]="filter.value" 
                     (ngModelChange)="onToggleChange(filter, $event)"
                     clrToggle 
                     class="clr-toggle">
              <label class="toggle-label">{{ filter.field }}</label>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Drilldown Filters -->
      <div class="filter-group" *ngIf="drilldownFilters && drilldownFilters.length > 0 && currentDrilldownLevel > 0">
        <h4>Drilldown Filters</h4>
        <div class="filter-controls">
          <div *ngFor="let filter of drilldownFilters" class="filter-item">
            <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
            
            <!-- Text Filter -->
            <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
              <input type="text" 
                     [(ngModel)]="filter.value" 
                     (ngModelChange)="onDrilldownFilterChange(filter)"
                     [placeholder]="filter.field"
                     class="clr-input filter-text-input">
            </div>
            
            <!-- Dropdown Filter -->
            <div *ngIf="filter.type === 'dropdown'" class="filter-input">
              <select [(ngModel)]="filter.value" 
                      (ngModelChange)="onDrilldownFilterChange(filter)"
                      class="clr-select filter-select">
                <option value="">Select {{ filter.field }}</option>
                <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
              </select>
            </div>
            
            <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
            <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
              <div class="multiselect-display" (click)="toggleMultiselect(filter, 'drilldown')">
                <span class="multiselect-label">{{ filter.field }}</span>
                <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
                  ({{ getSelectedOptionsCount(filter) }} selected)
                </span>
                <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
              </div>
              <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'drilldown')">
                <div class="checkbox-group">
                  <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
                    <input type="checkbox" 
                           [checked]="isOptionSelected(filter, option)" 
                           (change)="onMultiSelectChange(filter, option, $event)"
                           [id]="'drilldown-' + filter.field + '-' + i" 
                           class="clr-checkbox">
                    <label [for]="'drilldown-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- Date Range Filter -->
            <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
              <div class="date-input-group">
                <input type="date" 
                       [(ngModel)]="filter.value.start" 
                       (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
                       placeholder="Start Date"
                       class="clr-input filter-date">
                <span class="date-separator">to</span>
                <input type="date" 
                       [(ngModel)]="filter.value.end" 
                       (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
                       placeholder="End Date"
                       class="clr-input filter-date">
              </div>
            </div>
            
            <!-- Toggle Filter -->
            <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
              <input type="checkbox" 
                     [(ngModel)]="filter.value" 
                     (ngModelChange)="onToggleChange(filter, $event)"
                     clrToggle 
                     class="clr-toggle">
              <label class="toggle-label">{{ filter.field }}</label>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Layer Filters -->
      <div class="filter-group" *ngIf="hasActiveLayerFilters()">
        <h4>Layer Filters</h4>
        <div class="filter-controls">
          <div *ngFor="let filter of getActiveLayerFilters()" class="filter-item">
            <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
            
            <!-- Text Filter -->
            <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
              <input type="text" 
                     [(ngModel)]="filter.value" 
                     (ngModelChange)="onLayerFilterChange(filter)"
                     [placeholder]="filter.field"
                     class="clr-input filter-text-input">
            </div>
            
            <!-- Dropdown Filter -->
            <div *ngIf="filter.type === 'dropdown'" class="filter-input">
              <select [(ngModel)]="filter.value" 
                      (ngModelChange)="onLayerFilterChange(filter)"
                      class="clr-select filter-select">
                <option value="">Select {{ filter.field }}</option>
                <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
              </select>
            </div>
            
            <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
            <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
              <div class="multiselect-display" (click)="toggleMultiselect(filter, 'layer')">
                <span class="multiselect-label">{{ filter.field }}</span>
                <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
                  ({{ getSelectedOptionsCount(filter) }} selected)
                </span>
                <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
              </div>
              <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'layer')">
                <div class="checkbox-group">
                  <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
                    <input type="checkbox" 
                           [checked]="isOptionSelected(filter, option)" 
                           (change)="onMultiSelectChange(filter, option, $event)"
                           [id]="'layer-' + filter.field + '-' + i" 
                           class="clr-checkbox">
                    <label [for]="'layer-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- Date Range Filter -->
            <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
              <div class="date-input-group">
                <input type="date" 
                       [(ngModel)]="filter.value.start" 
                       (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
                       placeholder="Start Date"
                       class="clr-input filter-date">
                <span class="date-separator">to</span>
                <input type="date" 
                       [(ngModel)]="filter.value.end" 
                       (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
                       placeholder="End Date"
                       class="clr-input filter-date">
              </div>
            </div>
            
            <!-- Toggle Filter -->
            <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
              <input type="checkbox" 
                     [(ngModel)]="filter.value" 
                     (ngModelChange)="onToggleChange(filter, $event)"
                     clrToggle 
                     class="clr-toggle">
              <label class="toggle-label">{{ filter.field }}</label>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Clear Filters Button -->
      <div class="filter-actions">
        <button class="btn btn-sm btn-outline" (click)="clearAllFilters()">Clear All Filters</button>
      </div>
    </div>
    
    <div class="clr-row">
      <!-- <div class="clr-col-8">
        <h3>{{charttitle || 'Data Grid'}}</h3>
      </div> -->
      <!-- Add drilldown navigation controls -->
      <div class="clr-col-4" *ngIf="drilldownEnabled && drilldownStack.length > 0" style="text-align: right;">
        <button class="btn btn-sm btn-link" (click)="navigateBack()">
          <cds-icon shape="arrow" direction="left"></cds-icon>
          Back to {{drilldownStack.length > 1 ? 'Previous Level' : 'Main Data'}}
        </button>
      </div>
    </div>
    
    <!-- Show current drilldown level -->
    <div class="clr-row" *ngIf="drilldownEnabled && drilldownStack.length > 0">
      <div class="clr-col-12">
        <div class="alert alert-info" style="padding: 8px 12px; margin-bottom: 12px;">
          <div class="alert-items">
            <div class="alert-item static">
              <div class="alert-icon-wrapper">
                <cds-icon class="alert-icon" shape="info-circle"></cds-icon>
              </div>
              <span class="alert-text">
                Drilldown Level: {{currentDrilldownLevel}} 
                <span *ngIf="drilldownStack.length > 0">
                  (Clicked on: {{drilldownStack[drilldownStack.length - 1].clickedKey}} = {{drilldownStack[drilldownStack.length - 1].clickedValue}})
                </span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <clr-datagrid [clrDgLoading]="loading">
      <clr-dg-placeholder> 
        <ng-template #loadingSpinner>
          <clr-spinner>Loading ... </clr-spinner>
        </ng-template>
        <div *ngIf="error;else loadingSpinner">{{error}}</div>
      </clr-dg-placeholder>

      <!-- Dynamic columns based on response keys -->
      <clr-dg-column *ngFor="let header of dynamicHeaders" [clrDgField]="header.key"> 
        <ng-container *clrDgHideableColumn="{hidden: false}">
          {{header.displayName}}
        </ng-container>
      </clr-dg-column>

      <clr-dg-row *clrDgItems="let item of givendata" [clrDgItem]="item">
        <!-- Dynamic cells based on response keys -->
        <clr-dg-cell *ngFor="let header of dynamicHeaders" (click)="onRowClick(item, header.key)">
          {{item[header.key]}}
        </clr-dg-cell>
      </clr-dg-row>

      <clr-dg-footer>
        <clr-dg-pagination #pagination [clrDgPageSize]="10">
          <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Record per page</clr-dg-page-size>
          {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
          of {{pagination.totalItems}} Records
        </clr-dg-pagination>
      </clr-dg-footer>
    </clr-datagrid>
  </div>
</div>