<div class="doughnut-chart-container">
  <!-- Compact Filters -->
  <div class="compact-filters-container" *ngIf="baseFilters && baseFilters.length > 0">
    <app-compact-filter 
      *ngFor="let filter of baseFilters" 
      [filterKey]="filter.field"
      (filterChange)="onFilterChange($event)">
    </app-compact-filter>
  </div>
  
  <!-- Drilldown mode indicator -->
  <div *ngIf="currentDrilldownLevel > 0" class="drilldown-indicator">
    <span class="drilldown-text">Drilldown Level: {{currentDrilldownLevel}}</span>
    <button class="btn btn-secondary btn-sm" (click)="navigateBack()">
      Back to Level {{currentDrilldownLevel - 1}}
    </button>
    <button class="btn btn-danger btn-sm" (click)="resetToOriginalData()">
      Back to Main View
    </button>
  </div>
  
  <div class="chart-header">
    <h3 class="chart-title" *ngIf="charttitle">{{ charttitle }}</h3>
  </div>
  
  <div class="chart-wrapper">
    <div class="chart-content" [class.loading]="doughnutChartLabels.length === 0 && doughnutChartData.length === 0 && !noDataAvailable">
      <!-- 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 && doughnutChartLabels.length > 0 && doughnutChartData.length > 0"
        [data]="doughnutChartData" 
        [labels]="doughnutChartLabels" 
        [type]="doughnutChartType"
        [options]="doughnutChartOptions"
        (chartHover)="chartHovered($event)"
        (chartClick)="chartClicked($event)">
      </canvas>
      
      <!-- Loading overlay -->
      <div class="loading-overlay" *ngIf="doughnutChartLabels.length === 0 && doughnutChartData.length === 0 && !noDataAvailable">
        <div class="shimmer-donut"></div>
      </div>
    </div>
  </div>
  
  <div class="chart-legend" *ngIf="!noDataAvailable && showlabel && doughnutChartLabels && doughnutChartLabels.length > 0">
    <div class="legend-item" *ngFor="let label of doughnutChartLabels; let i = index">
      <span class="legend-color" [style.background-color]="getLegendColor(i)"></span>
      <span class="legend-label">{{ label }}</span>
      <span class="legend-value">{{ doughnutChartData && doughnutChartData[i] !== undefined ? doughnutChartData[i] : 0 }}</span>
    </div>
  </div>
</div>