<div class="dynamic-field-form">
  <form clrForm (ngSubmit)="onSubmit()" #dynamicFieldForm="ngForm">
    <clr-input-container>
      <label>Field Name <span class="required">*</span></label>
      <input clrInput type="text" [(ngModel)]="dynamicField.fieldName" name="fieldName" required />
    </clr-input-container>
    
    <clr-input-container>
      <label>Field Label</label>
      <input clrInput type="text" [(ngModel)]="dynamicField.fieldLabel" name="fieldLabel" />
    </clr-input-container>
    
    <clr-select-container>
      <label>Field Type</label>
      <select clrSelect [(ngModel)]="dynamicField.fieldType" name="fieldType">
        <option value="">Select a type</option>
        <option *ngFor="let type of fieldTypes" [value]="type">{{ type | titlecase }}</option>
      </select>
    </clr-select-container>
    
    <clr-textarea-container>
      <label>Field Options (JSON format)</label>
      <textarea clrTextarea [(ngModel)]="dynamicField.fieldOptions" name="fieldOptions" rows="3" placeholder='{"option1": "Option 1", "option2": "Option 2"}'></textarea>
    </clr-textarea-container>
    
    <clr-input-container>
      <label>Sort Order</label>
      <input clrInput type="number" [(ngModel)]="dynamicField.sortOrder" name="fieldSortOrder" />
    </clr-input-container>
    
    <clr-checkbox-container>
      <label>Is Required</label>
      <clr-checkbox-wrapper>
        <input type="checkbox" clrCheckbox [(ngModel)]="dynamicField.isRequired" name="fieldIsRequired" />
        <label>Required</label>
      </clr-checkbox-wrapper>
    </clr-checkbox-container>
    
    <clr-checkbox-container>
      <label>Show in UI</label>
      <clr-checkbox-wrapper>
        <input type="checkbox" clrCheckbox [(ngModel)]="dynamicField.showInUi" name="fieldShowInUi" />
        <label>Show in UI</label>
      </clr-checkbox-wrapper>
    </clr-checkbox-container>
    
    <div class="form-actions">
      <button class="btn btn-primary" type="submit" [disabled]="!dynamicField.fieldName">
        {{ isEdit ? 'Update' : 'Save' }}
      </button>
      <button class="btn" type="button" (click)="onCancel()">Cancel</button>
    </div>
  </form>
</div>