<div class="chart-type-templates-page">
  <div class="header">
    <h2>
      <button class="btn btn-link back-button" (click)="goBack()">
        <cds-icon shape="arrow" direction="left"></cds-icon>
      </button>
      Chart Templates for {{ chartType?.name || 'Chart Type' }}
    </h2>
  </div>

  <!-- 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>

  <!-- Add Chart Template Form -->
  <div class="card" *ngIf="showAddForm">
    <div class="card-header">
      <h3>Add New Chart Template</h3>
    </div>
    <div class="card-block">
      <form clrForm (ngSubmit)="createChartTemplate()" #addChartTemplateForm="ngForm">
        <clr-input-container>
          <label>Template Name <span class="required">*</span></label>
          <input clrInput type="text" [(ngModel)]="newChartTemplate.templateName" name="templateName" required />
          <clr-control-helper>Enter a unique name for the chart template</clr-control-helper>
        </clr-input-container>

        <clr-textarea-container>
          <label>HTML Template</label>
          <textarea clrTextarea [(ngModel)]="newChartTemplate.templateHtml" name="templateHtml" rows="5"></textarea>
          <clr-control-helper>HTML structure for rendering the chart</clr-control-helper>
        </clr-textarea-container>

        <clr-textarea-container>
          <label>CSS Template</label>
          <textarea clrTextarea [(ngModel)]="newChartTemplate.templateCss" name="templateCss" rows="5"></textarea>
          <clr-control-helper>CSS styling for the chart template</clr-control-helper>
        </clr-textarea-container>

        <clr-checkbox-container>
          <label>Is Default</label>
          <clr-checkbox-wrapper>
            <input type="checkbox" clrCheckbox [(ngModel)]="newChartTemplate.isDefault" name="isDefault" />
            <label>Default Template</label>
          </clr-checkbox-wrapper>
          <clr-control-helper>Mark as default template for this chart type</clr-control-helper>
        </clr-checkbox-container>

        <div class="form-actions">
          <button class="btn btn-primary" type="submit" [disabled]="!newChartTemplate.templateName || loadingState === ClrLoadingState.LOADING">
            <clr-spinner *ngIf="loadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
            Create Chart Template
          </button>
          <button class="btn" type="button" (click)="showAddForm = false">Cancel</button>
        </div>
      </form>
    </div>
  </div>

  <!-- Chart Templates Grid -->
  <div class="card">
    <div class="card-header">
      <div class="clr-row">
        <div class="clr-col">
          <h3>Chart Templates</h3>
        </div>
        <div class="clr-col" style="text-align: right;">
          <button class="btn btn-primary" (click)="showAddForm = true">
            <cds-icon shape="plus"></cds-icon> Add Chart Template
          </button>
        </div>
      </div>
    </div>

    <div class="card-block">
      <clr-datagrid [clrDgLoading]="loadingState === ClrLoadingState.LOADING">
        <clr-dg-column>Template Name</clr-dg-column>
        <clr-dg-column>Default</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 chartTemplate of chartTemplates" [clrDgItem]="chartTemplate">
          <clr-dg-cell>{{chartTemplate.templateName}}</clr-dg-cell>
          <clr-dg-cell>
            <span class="label" [class.label-success]="chartTemplate.isDefault" [class.label-danger]="!chartTemplate.isDefault">
              {{chartTemplate.isDefault ? 'Yes' : 'No'}}
            </span>
          </clr-dg-cell>
          <clr-dg-cell>{{chartTemplate.createdAt | date:'short'}}</clr-dg-cell>
          <clr-dg-cell>{{chartTemplate.updatedAt | date:'short'}}</clr-dg-cell>
          <clr-dg-cell>
            <button class="btn btn-sm btn-icon" (click)="selectChartTemplateForEdit(chartTemplate)" title="Edit">
              <cds-icon shape="pencil"></cds-icon>
            </button>
            <button class="btn btn-sm btn-icon" (click)="deleteChartTemplate(chartTemplate.id)" title="Delete">
              <cds-icon shape="trash"></cds-icon>
            </button>
          </clr-dg-cell>
        </clr-dg-row>

        <clr-dg-footer>
          {{chartTemplates.length}} chart template(s)
        </clr-dg-footer>
      </clr-datagrid>
    </div>
  </div>

  <!-- Edit Chart Template Form -->
  <div class="card" *ngIf="selectedChartTemplate">
    <div class="card-header">
      <h3>Edit Chart Template</h3>
    </div>
    <div class="card-block">
      <form clrForm (ngSubmit)="updateChartTemplate()" #editChartTemplateForm="ngForm">
        <clr-input-container>
          <label>Template Name <span class="required">*</span></label>
          <input clrInput type="text" [(ngModel)]="selectedChartTemplate.templateName" name="editTemplateName" required />
        </clr-input-container>

        <clr-textarea-container>
          <label>HTML Template</label>
          <textarea clrTextarea [(ngModel)]="selectedChartTemplate.templateHtml" name="editTemplateHtml" rows="5"></textarea>
        </clr-textarea-container>

        <clr-textarea-container>
          <label>CSS Template</label>
          <textarea clrTextarea [(ngModel)]="selectedChartTemplate.templateCss" name="editTemplateCss" rows="5"></textarea>
        </clr-textarea-container>

        <clr-checkbox-container>
          <label>Is Default</label>
          <clr-checkbox-wrapper>
            <input type="checkbox" clrCheckbox [(ngModel)]="selectedChartTemplate.isDefault" name="editIsDefault" />
            <label>Default Template</label>
          </clr-checkbox-wrapper>
        </clr-checkbox-container>

        <div class="form-actions">
          <button class="btn btn-primary" type="submit" [disabled]="!selectedChartTemplate.templateName || loadingState === ClrLoadingState.LOADING">
            <clr-spinner *ngIf="loadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
            Update Chart Template
          </button>
          <button class="btn" type="button" (click)="selectedChartTemplate = null">Cancel</button>
        </div>
      </form>
    </div>
  </div>

  <div class="info-section">
    <h4>About Chart Templates</h4>
    <p>Chart templates define how a chart of this type is rendered. Each template includes:</p>
    <ul>
      <li>HTML structure that defines the chart layout</li>
      <li>CSS styling that controls the appearance</li>
      <li>A default flag to indicate the primary template</li>
    </ul>
    <p>Templates allow you to have multiple visual representations for the same chart type.</p>
  </div>
</div>