<ng-container *ngIf="form && fieldDefinition">
  <ng-container [ngSwitch]="fieldDefinition.type">
    <ng-container *ngSwitchCase="'boolean'">
      <c8y-form-group [formGroup]="form">
        <label
          class="c8y-checkbox"
          [title]="fieldDefinition.label | translate"
          [for]="fieldDefinition.id"
        >
          <input
            type="checkbox"
            [id]="fieldDefinition.id"
            [formControlName]="fieldDefinition.id"
          />
          <span></span>
          <span>{{ fieldDefinition.label | translate }}</span>
        </label>
      </c8y-form-group>
    </ng-container>

    <ng-container *ngSwitchCase="'number'">
      <c8y-form-group [formGroup]="form">
        <label [for]="fieldDefinition.id">
          {{ fieldDefinition.label | translate }}
        </label>
        <input
          class="form-control"
          type="number"
          [id]="fieldDefinition.id"
          [formControlName]="fieldDefinition.id"
        />
      </c8y-form-group>
    </ng-container>

    <ng-container *ngSwitchCase="'integer'">
      <c8y-form-group [formGroup]="form">
        <label [for]="fieldDefinition.id">
          {{ fieldDefinition.label | translate }}
        </label>
        <input
          class="form-control"
          type="number"
          [id]="fieldDefinition.id"
          [formControlName]="fieldDefinition.id"
        />
      </c8y-form-group>
    </ng-container>

    <ng-container *ngSwitchCase="'string'">
      <c8y-form-group
        *ngIf="!fieldDefinition.format"
        [formGroup]="form"
      >
        <label [for]="fieldDefinition.id">
          {{ fieldDefinition.label | translate }}
        </label>
        <input
          class="form-control"
          type="text"
          [id]="fieldDefinition.id"
          [formControlName]="fieldDefinition.id"
        />
      </c8y-form-group>

      <c8y-form-group
        *ngIf="fieldDefinition.format === 'datetime'"
        [formGroup]="form"
      >
        <label [for]="fieldDefinition.id">
          {{ fieldDefinition.label | translate }}
        </label>
        <c8y-date-time-picker
          [id]="fieldDefinition.id"
          [formControlName]="fieldDefinition.id"
          data-cy="c8y-custom-property-field--date-time-picker"
        ></c8y-date-time-picker>
      </c8y-form-group>
    </ng-container>
  </ng-container>
</ng-container>