<div class="form-group" [class.has-error]="showError">
  <label *ngIf="to.label && to.hideLabel !== true" [attr.for]="id">
    {{ 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-clean m-l-4 flex-item-middle"
      [popover]="to.description | translate"
      placement="auto"
      outsideClick="true"
      type="button"
    >
      <i c8yIcon="question-circle-o" class="text-info"></i>
    </button>
  </label>

  <ng-template #fieldComponent></ng-template>

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

  <div class="help-block" *ngIf="!showError && to.description && !showDescriptionAsPopup">
    {{ to.description | translate }}
  </div>
</div>