{# Number input widget - pure HTML template #}
<div class="form-control">
  <div class="flex flex-col gap-2 sm:flex-row sm:items-baseline">
    <!-- Label -->
    <label class="label sm:w-48 sm:shrink-0">
      <span
        class="label-text"
        :class="{
              'text-error': hasError,
              'text-sm text-base-content/60': isViewMode
            }"
        x-text="label"
      ></span>
    </label>

    <!-- Input column -->
    <div class="flex-1">
      <!-- Help text -->
      <template x-if="helpText">
        <div class="label">
          <span
            class="label-text-alt text-base-content/60"
            x-text="helpText"
          ></span>
        </div>
      </template>

      <!-- View mode: show value with unit -->
      <template x-if="isViewMode">
        <div class="mt-1">
          <span class="text-base" x-text="value"></span>
          <template x-if="value && unit">
            <span class="text-xs" x-text="unit"></span>
          </template>
        </div>
      </template>

      <!-- Edit mode: input with unit suffix -->
      <template x-if="isEditMode">
        <div :class="unit ? 'join w-full' : ''">
          <input
            type="number"
            :class="unit ? 'input input-bordered join-item flex-1' : 'input input-bordered w-full'"
            class:input-error="hasError"
            x-model="value"
          />
          <template x-if="unit">
            <span
              class="btn btn-ghost join-item no-animation pointer-events-none"
              x-text="unit"
            ></span>
          </template>
        </div>
      </template>

      <!-- Errors -->
      <template x-if="hasError">
        <div class="label">
          <template x-for="errMsg in errors" :key="errMsg">
            <span class="label-text-alt text-error" x-text="errMsg"></span>
          </template>
        </div>
      </template>
    </div>
  </div>
</div>