<div class="form-group" [class.has-error]="showError">
  <label *ngIf="to.label && to.hideLabel !== true" [attr.for]="id" class="text-pre-wrap">
    {{ to.label | humanize }}
    <i
      *ngIf="to.tooltip"
      class="text-info"
      c8yIcon="info-circle"
      title="{{ to.tooltip | translate }}"
    ></i>
    <button
      *ngIf="to.description && showDescriptionAsPopup"
      class="btn-help btn-help--sm m-l-4 m-t-auto m-b-auto"
      [attr.aria-label]="'Help' | translate"
      [popover]="to.description | translate"
      triggers="focus"
      type="button"
    ></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 *ngIf="showError" class="c8y-messages">
    <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"
  >
    {{ to.description | translate }}
  </div>
</div>