<ng-template #labelTemplate>
  <div class="d-flex align-items-center">
    <label *ngIf="props.label && props.hideLabel !== true"
           [attr.for]="id"
           class="form-label">
      {{ props.label }}
      <span *ngIf="props.required && props.hideRequiredMarker !== true"
            aria-hidden="true">*</span>
      <cd-helper *ngIf="helper">
        <span [innerHTML]="helper"></span>
      </cd-helper>
    </label>
  </div>
</ng-template>

<div class="mb-3"
     [class.form-floating]="props.labelPosition === 'floating'"
     [class.has-error]="showError">
  <ng-container *ngIf="props.labelPosition !== 'floating'">
    <ng-container [ngTemplateOutlet]="labelTemplate"></ng-container>
  </ng-container>

  <ng-container #fieldComponent></ng-container>

  <ng-container *ngIf="props.labelPosition === 'floating'">
    <ng-container [ngTemplateOutlet]="labelTemplate"></ng-container>
  </ng-container>

  <div *ngIf="showError"
       class="invalid-feedback"
       [style.display]="'block'">
    <formly-validation-message [field]="field"></formly-validation-message>
  </div>

  <small *ngIf="props.description"
         class="form-text text-muted">{{ props.description }}</small>
</div>
