@if (isFloating()) {
  <div class="shared-form-field">
    <div
      class="shared-form-control"
      [class.is-focused]="focused()"
      [class.has-value]="hasValue()"
      [class.has-error]="showError()"
      [class.is-disabled]="isDisabled()"
    >
      @if (prefixIcon()) {
        <span class="shared-form-prefix" aria-hidden="true">
          <i [class]="prefixIcon() + ' text-[1rem] leading-none ' + prefixIconClass()"></i>
        </span>
      }

      <input
        data-form-control
        class="shared-form-input"
        [class.has-prefix]="hasPrefixIcon()"
        [class.has-suffix]="hasSuffixContent()"
        [id]="inputId()"
        [name]="name()"
        [type]="resolvedType()"
        [value]="value() ?? ''"
        placeholder=" "
        [required]="required()"
        [readOnly]="readonly()"
        [disabled]="isDisabled()"
        [attr.autocomplete]="autocomplete()"
        [attr.inputmode]="inputMode()"
        [attr.spellcheck]="spellcheck()"
        [attr.minlength]="minLength()"
        [attr.maxlength]="maxLength()"
        [attr.pattern]="pattern()"
        [attr.min]="min()"
        [attr.max]="max()"
        [attr.step]="step()"
        [attr.aria-label]="ariaLabel() || label()"
        [attr.aria-description]="ariaDescription()"
        [attr.aria-describedby]="describedBy()"
        [attr.aria-invalid]="showError() ? 'true' : null"
        [attr.aria-required]="required() ? 'true' : null"
        [attr.aria-busy]="loading() ? 'true' : null"
        (focus)="onFocus()"
        (input)="onInput($event)"
        (blur)="onBlur()"
      />

      <label class="shared-floating-label" [for]="inputId()">
        {{ label() }}
        @if (required()) {
          <span class="ms-0.5 text-danger" aria-hidden="true">*</span>
          <span class="sr-only">Required</span>
        }
      </label>

      @if (loading()) {
        <span class="shared-form-suffix" aria-hidden="true">
          <span class="inline-block size-4 animate-spin rounded-full border-2 border-current border-t-transparent text-primary"></span>
        </span>
      } @else if (type() === 'password' && showPasswordToggle()) {
        <button
          type="button"
          class="shared-form-suffix shared-form-action"
          [disabled]="isDisabled()"
          [attr.aria-label]="passwordVisible() ? 'Hide ' + label() : 'Show ' + label()"
          (click)="togglePasswordVisibility()"
        >
          <i [class]="passwordVisible() ? 'ri-eye-off-line' : 'ri-eye-line'" aria-hidden="true"></i>
        </button>
      } @else if (suffixIcon()) {
        <span class="shared-form-suffix" aria-hidden="true">
          <i [class]="suffixIcon() + ' text-[1rem] leading-none ' + suffixIconClass()"></i>
        </span>
      }
    </div>

    @if (!hideValidation()) {
      <app-form-validation-message
        [id]="inputId() + '-validation'"
        [fieldName]="label()"
        [control]="control()"
        [messages]="validationMessages()"
        [showWhenDirty]="showValidationWhenDirty()"
        [submitAttempted]="submitAttempted()"
      />
    }
  </div>
} @else {
  <app-form-field
    [label]="label()"
    [inputId]="inputId()"
    [control]="control()"
    [required]="required()"
    [disabled]="isDisabled()"
    [description]="description()"
    [hint]="hint()"
    [help]="help()"
    [hideValidation]="hideValidation()"
    [showValidationWhenDirty]="showValidationWhenDirty()"
    [submitAttempted]="submitAttempted()"
    [validationMessages]="validationMessages()"
    [wrapperClass]="wrapperClass()"
    [labelClass]="labelClass()"
    [contentClass]="fieldContentClass()"
  >
    <div class="relative">
      @if (prefixIcon()) {
        <span class="pointer-events-none absolute inset-y-0 start-0 z-[1] flex w-10 items-center justify-center text-textmuted" aria-hidden="true">
          <i [class]="prefixIcon() + ' text-[1rem] leading-none ' + prefixIconClass()"></i>
        </span>
      }
      <input
        data-form-control
        [id]="inputId()"
        [name]="name()"
        [type]="resolvedType()"
        [class]="resolvedInputClass()"
        [value]="value() ?? ''"
        [placeholder]="resolvedPlaceholder()"
        [required]="required()"
        [readOnly]="readonly()"
        [disabled]="isDisabled()"
        [attr.autocomplete]="autocomplete()"
        [attr.inputmode]="inputMode()"
        [attr.spellcheck]="spellcheck()"
        [attr.minlength]="minLength()"
        [attr.maxlength]="maxLength()"
        [attr.pattern]="pattern()"
        [attr.min]="min()"
        [attr.max]="max()"
        [attr.step]="step()"
        [attr.aria-label]="ariaLabel() || label()"
        [attr.aria-description]="ariaDescription()"
        [attr.aria-describedby]="describedBy()"
        [attr.aria-invalid]="showError() ? 'true' : null"
        [attr.aria-required]="required() ? 'true' : null"
        [attr.aria-busy]="loading() ? 'true' : null"
        (focus)="onFocus()"
        (input)="onInput($event)"
        (blur)="onBlur()"
      />
      @if (loading()) {
        <span class="pointer-events-none absolute inset-y-0 end-0 flex w-10 items-center justify-center" aria-hidden="true">
          <span class="inline-block size-4 animate-spin rounded-full border-2 border-current border-t-transparent text-primary"></span>
        </span>
      } @else if (type() === 'password' && showPasswordToggle()) {
        <button type="button" class="absolute inset-y-0 end-0 flex w-10 cursor-pointer items-center justify-center text-textmuted" [disabled]="isDisabled()" [attr.aria-label]="passwordVisible() ? 'Hide ' + label() : 'Show ' + label()" (click)="togglePasswordVisibility()">
          <i [class]="passwordVisible() ? 'ri-eye-off-line' : 'ri-eye-line'" aria-hidden="true"></i>
        </button>
      } @else if (suffixIcon()) {
        <span class="pointer-events-none absolute inset-y-0 end-0 flex w-10 items-center justify-center text-textmuted" aria-hidden="true">
          <i [class]="suffixIcon() + ' text-[1rem] leading-none ' + suffixIconClass()"></i>
        </span>
      }
    </div>
  </app-form-field>
}