{# Compound link 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': $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: display as link -->
      <template x-if="isViewMode">
        <div class="mt-1">
          <template x-if="value">
            <a
              :href="value"
              class="link link-primary break-all"
              target="_blank"
              x-text="value"
            ></a>
          </template>
          <template x-if="!value">
            <span class="text-base-content/50">—</span>
          </template>
        </div>
      </template>

      <!-- Edit mode -->
      <template x-if="isEditMode">
        <input
          type="url"
          class="input input-bordered w-full"
          :class="{ 'input-error': $store.validationErrors.hasError(fieldName, context) }"
          placeholder="Compound URL"
          x-model="value"
        />
      </template>

      <!-- Errors -->
      <template x-if="$store.validationErrors.hasError(fieldName, context)">
        <div class="label">
          <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>