<div class="dynamic-chart-container">
  <!-- 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>