<div class="dynamic-chart-container">
  <!-- 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>
  
  <!-- Header row with chart title and drilldown navigation -->
  <div class="clr-row header-row">
    <div class="clr-col-6">
      <h3 class="chart-title">{{charttitle || 'Dynamic Chart'}}</h3>
    </div>
    <div class="clr-col-6" style="text-align: right;">
      <!-- Add drilldown navigation controls -->
      <button class="btn btn-sm btn-link" *ngIf="drilldownEnabled && drilldownStack.length > 0" (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].clickedLabel}})
              </span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Existing content -->
  <!-- Drilldown mode indicator -->
  <div *ngIf="currentDrilldownLevel > 0" style="background-color: #e0e0e0; padding: 5px; margin-bottom: 10px; border-radius: 4px; text-align: center;">
    <span style="font-weight: bold; color: #333;">Drilldown Level: {{currentDrilldownLevel}}</span>
    <button (click)="navigateBack()" style="margin-left: 10px; padding: 2px 8px; background-color: #007cba; color: white; border: none; border-radius: 3px; cursor: pointer;">
      Back to Level {{currentDrilldownLevel - 1}}
    </button>
    <button (click)="resetToOriginalData()" style="margin-left: 10px; padding: 2px 8px; background-color: #dc3545; color: white; border: none; border-radius: 3px; cursor: pointer;">
      Back to Main View
    </button>
  </div>
  
  <h3 class="chart-title" *ngIf="charttitle">{{ charttitle }}</h3>
  <div class="chart-wrapper">
    <!-- Show loading indicator -->
    <div class="loading-indicator" *ngIf="dynamicChartLabels.length === 0 && dynamicChartData.length === 0 && !noDataAvailable">
      <div class="spinner"></div>
      <p>Loading chart data...</p>
    </div>
    
    <!-- Show no data message -->
    <div class="no-data-message" *ngIf="noDataAvailable">
      <p>No chart data available</p>
    </div>
    
    <!-- Show chart when data is available -->
    <canvas baseChart 
      *ngIf="!noDataAvailable && dynamicChartLabels.length > 0 && dynamicChartData.length > 0"
      [datasets]="dynamicChartData"
      [options]="barChartOptions"
      [type]="barChartType"
      [labels]="dynamicChartLabels"
      (chartHover)="chartHovered($event)"
      (chartClick)="chartClicked($event)">
    </canvas>
  </div>
  <button class="btn btn-primary" (click)="randomize()">Update</button>
</div>