{# Interval widget for range inputs - 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': hasValidationError || $store.validationErrors.hasError(fieldName, context),
              '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: formatted range with unit -->
      <template x-if="isViewMode">
        <div class="mt-1">
          <span class="text-base" x-text="start"></span>
          <span class="text-base-content/60 text-xs" x-show="!isSameValue"
            >to</span
          >
          <span class="text-base" x-text="end" x-show="!isSameValue"></span>
          <template x-if="start && end && unit">
            <span class="text-xs" x-text="unit"></span>
          </template>
        </div>
      </template>

      <!-- Edit mode: two inputs with shared unit badge -->
      <template x-if="isEditMode">
        <div class="flex items-center gap-2">
          <input
            type="number"
            class="input input-bordered flex-1"
            :class="{ 'input-error': hasValidationError || $store.validationErrors.hasError(fieldName, context) }"
            placeholder="Min"
            x-model="start"
          />
          <span class="text-base-content/60">to</span>
          <input
            type="number"
            class="input input-bordered flex-1"
            :class="{ 'input-error': hasValidationError || $store.validationErrors.hasError(fieldName, context) }"
            placeholder="Max"
            x-model="end"
          />
          <template x-if="unit">
            <span class="badge badge-ghost badge-lg" x-text="unit"></span>
          </template>
        </div>
      </template>

      <!-- Errors -->
      <template
        x-if="hasValidationError || $store.validationErrors.hasError(fieldName, context)"
      >
        <div class="label">
          <!-- Client-side validation error -->
          <template x-if="hasValidationError">
            <span class="label-text-alt text-error">
              Start value must be less than or equal to end value
            </span>
          </template>

          <!-- Server-side validation errors from store -->
          <template
            x-for="errMsg in $store.validationErrors.getErrors(fieldName, context)"
            :key="errMsg"
          >
            <span class="label-text-alt text-error" x-text="errMsg"></span>
          </template>
        </div>
      </template>
    </div>
  </div>
</div>