<ng-container [ngTemplateOutlet]="fieldTemplate" />

<ng-template #fieldTemplate>
  @if (showLabel) {
    <div [class]="`flex gap-1 ${alignment === 'horizontal' ? 'items-center' : 'flex-col'} ${className || ''}`">
      @if (labelView) {
        <ng-container [ngTemplateOutlet]="labelView"> </ng-container>
      } @else {
        <uikit-label [name]="name" [invalid]="!!invalid || hasError">
          {{ label }}
        </uikit-label>
      }
      <ng-container [ngTemplateOutlet]="contentTemplate" />
    </div>
  } @else {
    <ng-container [ngTemplateOutlet]="contentTemplate" />
  }
</ng-template>

<ng-template #contentTemplate>
  <ng-content></ng-content>
  @if (showErrors && hasError) {
    <ng-container>
      <p-message severity="error" size="small" variant="simple" class="formHint">
        {{ errors[0] }}
      </p-message>
    </ng-container>
  }
</ng-template>
