<div class="component-property-form">
  <form clrForm (ngSubmit)="onSubmit()" #componentPropertyForm="ngForm">
    <clr-input-container>
      <label>Property Name <span class="required">*</span></label>
      <input clrInput type="text" [(ngModel)]="componentProperty.propertyName" name="propertyName" required />
    </clr-input-container>
    
    <clr-input-container>
      <label>Property Value</label>
      <input clrInput type="text" [(ngModel)]="componentProperty.propertyValue" name="propertyValue" />
    </clr-input-container>
    
    <clr-select-container>
      <label>Property Type</label>
      <select clrSelect [(ngModel)]="componentProperty.propertyType" name="propertyType">
        <option value="">Select a type</option>
        <option *ngFor="let type of propertyTypes" [value]="type">{{ type | titlecase }}</option>
      </select>
    </clr-select-container>
    
    <div class="form-actions">
      <button class="btn btn-primary" type="submit" [disabled]="!componentProperty.propertyName">
        {{ isEdit ? 'Update' : 'Save' }}
      </button>
      <button class="btn" type="button" (click)="onCancel()">Cancel</button>
    </div>
  </form>
</div>