<div
  class="form-group"
  [class.has-error]="showError"
  [class.form-group-sm]="smallFormGroup"
>
  <label
    class="text-pre-wrap"
    *ngIf="to.label && to.hideLabel !== true"
    [attr.for]="id"
  >
    {{ to.humanizeLabel === false ? to.label : (to.label | humanize) }}
    <i
      class="text-info"
      c8yIcon="info-circle"
      title="{{ to.tooltip | translate }}"
      *ngIf="to.tooltip"
    ></i>
    <ng-template #description><div [innerHTML]="to.description | translate"></div></ng-template>
    <button
      class="btn-help btn-help--sm m-t-auto m-b-auto"
      [attr.aria-label]="'Help' | translate"
      [popover]="description"
      placement="right"
      type="button"
      [outsideClick]="true"
      *ngIf="to.description && showDescriptionAsPopup"
    ></button>
  </label>
  <div class="d-flex">
    <div class="flex-grow">
      <ng-template #fieldComponent></ng-template>
    </div>
    <ng-container *ngIf="to.customTemplateRef">
      <ng-container *ngTemplateOutlet="to.customTemplateRef"></ng-container>
    </ng-container>
  </div>

  <div
    class="c8y-messages"
    *ngIf="showError"
  >
    <formly-validation-message
      class="form-control-feedback-message"
      [field]="field"
    ></formly-validation-message>
  </div>

  <div
    class="help-block has-info text-muted"
    *ngIf="!showError && to.description && !showDescriptionAsPopup"
    [innerHTML]="to.description | translate"
  ></div>
</div>