<div [class]="resolvedWrapperClass()">
  @if (showLabel() && !floating()) {
  <label [for]="inputId()" [class]="resolvedLabelClass()">
    {{ label() }}
    @if (required()) {
    <span [class]="requiredClass()" aria-hidden="true">
      *
    </span>

    <span class="sr-only">
      Required
    </span>
    }

    @if (showHelpIcon()) {

    <button type="button" class="text-muted hover:text-primary" [attr.aria-label]="help()" tooltipVariant="info" [appTooltip]="resolvedHelp()"
       aria-label="Field help">

      <i class="ti ti-info-circle"></i>

    </button>

    }
  </label>
  }

  <div [class]="resolvedContentClass()">
    @if (description()) {
    <p [id]="descriptionId()" [class]="descriptionClass()">
      {{ description() }}
    </p>
    }

    <div [class.floating-label]="floating()" [class.floating-label--float]="floating() && (hasValue() || forceFloat())" [class.floating-label--invalid]="floating() && hasVisibleError()">
      <ng-content />
      @if (floating()) {
      <label [for]="inputId()" [class]="resolvedLabelClass()">
        {{ label() }}
        @if (required()) {
        <span [class]="requiredClass()" aria-hidden="true">
          *
        </span>

        <span class="sr-only">
          Required
        </span>
        }
      </label>
      }
    </div>

    @if (showHint()) {
    <p [id]="hintId()" [class]="hintClass()">
      {{ hint() }}
    </p>
    }

    @if (!hideValidation()) {
    <app-form-validation-message [id]="validationId()" [fieldName]="label()" [control]="control()"
      [messages]="validationMessages()" [showWhenDirty]="showValidationWhenDirty()"
      [submitAttempted]="submitAttempted()" />
    }
  </div>
</div>
