<div class="chart-template-form">
  <form clrForm (ngSubmit)="onSubmit()" #chartTemplateForm="ngForm">
    <clr-input-container>
      <label>Template Name <span class="required">*</span></label>
      <input clrInput type="text" [(ngModel)]="chartTemplate.templateName" name="templateName" required />
    </clr-input-container>
    
    <clr-textarea-container>
      <label>HTML Template</label>
      <textarea clrTextarea [(ngModel)]="chartTemplate.templateHtml" name="templateHtml" rows="5" placeholder="<div class='chart-container'>...</div>"></textarea>
    </clr-textarea-container>
    
    <clr-textarea-container>
      <label>CSS Template</label>
      <textarea clrTextarea [(ngModel)]="chartTemplate.templateCss" name="templateCss" rows="5" placeholder=".chart-container { ... }"></textarea>
    </clr-textarea-container>
    
    <clr-checkbox-container>
      <label>Is Default</label>
      <clr-checkbox-wrapper>
        <input type="checkbox" clrCheckbox [(ngModel)]="chartTemplate.isDefault" name="isDefault" />
        <label>Default Template</label>
      </clr-checkbox-wrapper>
    </clr-checkbox-container>
    
    <div class="form-actions">
      <button class="btn btn-primary" type="submit" [disabled]="!chartTemplate.templateName">
        {{ isEdit ? 'Update' : 'Save' }}
      </button>
      <button class="btn" type="button" (click)="onCancel()">Cancel</button>
    </div>
  </form>
</div>