<div class="chart-type-form">
  <form clrForm (ngSubmit)="onSubmit()" #chartTypeForm="ngForm">
    <clr-input-container>
      <label>Name <span class="required">*</span></label>
      <input clrInput type="text" [(ngModel)]="chartType.name" name="chartTypeName" required />
    </clr-input-container>
    
    <clr-input-container>
      <label>Display Name</label>
      <input clrInput type="text" [(ngModel)]="chartType.displayName" name="chartTypeDisplayName" />
    </clr-input-container>
    
    <clr-textarea-container>
      <label>Description</label>
      <textarea clrTextarea [(ngModel)]="chartType.description" name="chartTypeDescription" rows="3"></textarea>
    </clr-textarea-container>
    
    <clr-checkbox-container>
      <label>Is Active</label>
      <clr-checkbox-wrapper>
        <input type="checkbox" clrCheckbox [(ngModel)]="chartType.isActive" name="chartTypeIsActive" />
        <label>Active</label>
      </clr-checkbox-wrapper>
    </clr-checkbox-container>
    
    <div class="form-actions">
      <button class="btn btn-primary" type="submit" [disabled]="!chartType.name">
        {{ isEdit ? 'Update' : 'Save' }}
      </button>
      <button class="btn" type="button" (click)="onCancel()">Cancel</button>
    </div>
  </form>
</div>