<div class="ui-component-form">
  <form clrForm (ngSubmit)="onSubmit()" #uiComponentForm="ngForm">
    <clr-input-container>
      <label>Component Name <span class="required">*</span></label>
      <input clrInput type="text" [(ngModel)]="uiComponent.componentName" name="componentName" required />
    </clr-input-container>
    
    <clr-select-container>
      <label>Component Type</label>
      <select clrSelect [(ngModel)]="uiComponent.componentType" name="componentType">
        <option value="">Select a type</option>
        <option *ngFor="let type of componentTypes" [value]="type">{{ type | titlecase }}</option>
      </select>
    </clr-select-container>
    
    <clr-input-container>
      <label>Display Label</label>
      <input clrInput type="text" [(ngModel)]="uiComponent.displayLabel" name="displayLabel" />
    </clr-input-container>
    
    <clr-input-container>
      <label>Placeholder</label>
      <input clrInput type="text" [(ngModel)]="uiComponent.placeholder" name="placeholder" />
    </clr-input-container>
    
    <clr-input-container>
      <label>Sort Order</label>
      <input clrInput type="number" [(ngModel)]="uiComponent.sortOrder" name="sortOrder" />
    </clr-input-container>
    
    <clr-checkbox-container>
      <label>Is Required</label>
      <clr-checkbox-wrapper>
        <input type="checkbox" clrCheckbox [(ngModel)]="uiComponent.isRequired" name="isRequired" />
        <label>Required</label>
      </clr-checkbox-wrapper>
    </clr-checkbox-container>
    
    <div class="form-actions">
      <button class="btn btn-primary" type="submit" [disabled]="!uiComponent.componentName">
        {{ isEdit ? 'Update' : 'Save' }}
      </button>
      <button class="btn" type="button" (click)="onCancel()">Cancel</button>
    </div>
  </form>
</div>