<div class="chart-type-manager">
  <h2>Chart Type Management</h2>
  
  <!-- Error and Success Messages -->
  <div class="alert alert-danger" *ngIf="errorMessage">
    <button type="button" class="close" aria-label="Close" (click)="errorMessage = null">
      <cds-icon shape="close"></cds-icon>
    </button>
    <div class="alert-item">
      <span class="alert-text">{{ errorMessage }}</span>
    </div>
  </div>
  
  <div class="alert alert-success" *ngIf="successMessage">
    <button type="button" class="close" aria-label="Close" (click)="successMessage = null">
      <cds-icon shape="close"></cds-icon>
    </button>
    <div class="alert-item">
      <span class="alert-text">{{ successMessage }}</span>
    </div>
  </div>
  
  <!-- Chart Types Grid -->
  <div class="card">
    <div class="card-header">
      <div class="clr-row">
        <div class="clr-col">
          <h3>Chart Types</h3>
        </div>
        <div class="clr-col" style="text-align: right;">
          <button class="btn btn-primary" [routerLink]="['/cns-portal/dashboardbuilder/chart-types/add']">
            <cds-icon shape="plus"></cds-icon> Add Chart Type
          </button>
        </div>
      </div>
    </div>
    
    <div class="card-block">
      <clr-datagrid [clrDgLoading]="chartTypeLoadingState === ClrLoadingState.LOADING">
        <clr-dg-column>Name</clr-dg-column>
        <clr-dg-column>Display Name</clr-dg-column>
        <clr-dg-column>Description</clr-dg-column>
        <clr-dg-column>Status</clr-dg-column>
        <clr-dg-column>Created At</clr-dg-column>
        <clr-dg-column>Updated At</clr-dg-column>
        <clr-dg-column>Actions</clr-dg-column>
        
        <clr-dg-row *clrDgItems="let chartType of chartTypes" [clrDgItem]="chartType">
          <clr-dg-cell>{{chartType.name}}</clr-dg-cell>
          <clr-dg-cell>{{chartType.displayName}}</clr-dg-cell>
          <clr-dg-cell>{{chartType.description}}</clr-dg-cell>
          <clr-dg-cell>
            <span class="label" [class.label-success]="chartType.isActive" [class.label-danger]="!chartType.isActive">
              {{chartType.isActive ? 'Active' : 'Inactive'}}
            </span>
          </clr-dg-cell>
          <clr-dg-cell>{{chartType.createdAt ? (chartType.createdAt | date:'short') : 'N/A'}}</clr-dg-cell>
          <clr-dg-cell>{{chartType.updatedAt ? (chartType.updatedAt | date:'short') : 'N/A'}}</clr-dg-cell>
          <clr-dg-cell>
            <button class="btn btn-sm btn-icon" [routerLink]="['/cns-portal/dashboardbuilder/chart-types/edit', chartType.id]" title="Edit">
              <cds-icon shape="pencil"></cds-icon>
            </button>
            <button class="btn btn-sm btn-icon" (click)="deleteChartType(chartType.id)" title="Delete">
              <cds-icon shape="trash"></cds-icon>
            </button>
          </clr-dg-cell>
        </clr-dg-row>
        
        <clr-dg-footer>
          {{chartTypes.length}} chart type(s)
        </clr-dg-footer>
      </clr-datagrid>
    </div>
  </div>
</div>