{# Form field macros — render the appropriate input for each field type.
   Contract: ~/.claude/skills/ux-architect/components/form-field.md (UX-017)

   v0.62 CSS refactor (complete): every branch (search-select, ref-entity,
   combobox, multi_select, tags, picker, range, color, rich_text, slider,
   plus the standard else-block) now emits semantic classes from
   `components/form.css`. The `aria-invalid="true"` attribute drives the
   destructive-border state via `.dz-form-input[aria-invalid="true"]`
   in CSS — no more conditional border-class concatenation per branch.
#}

{% macro render_field(field, values={}, errors={}) %}
{% set value = values.get(field.name, field.default) if values else field.default %}
{% set error = errors.get(field.name, "") if errors else "" %}
{% set field_id = "field-" ~ field.name %}
{% set error_id = "error-" ~ field.name %}
{% set hint_id = "hint-" ~ field.name if field.help is defined and field.help else "" %}
{% set described_by = ([error_id] if error else []) + ([hint_id] if hint_id else []) %}

<div class="dz-form-field">
  {% if field.type == "checkbox" %}
    {# Checkbox: label wraps input + text (inline row) #}
    <label class="dz-form-checkbox-label">
      <input type="checkbox" name="{{ field.name }}"
             id="{{ field_id }}"
             data-dazzle-field="{{ field.name }}"
             class="dz-form-checkbox"
             {% if error %}aria-invalid="true"{% endif %}
             {% if described_by %}aria-describedby="{{ described_by | join(' ') }}"{% endif %}
             {% if value %}checked{% endif %} />
      <span>{{ field.label }}</span>
    </label>
    {% if field.help is defined and field.help %}
    <p id="{{ hint_id }}" class="dz-form-hint">{{ field.help }}</p>
    {% endif %}

  {% elif field.source %}
    {# UX-028: search-select dynamic search with autofill #}
    <label for="search-input-{{ field.name }}" class="dz-form-label">
      {{ field.label }}
      {% if field.required %}
        <span class="dz-form-required" aria-hidden="true">*</span>
        <span class="visually-hidden">(required)</span>
      {% endif %}
    </label>
    {% if field.help is defined and field.help %}
    <p id="{{ hint_id }}" class="dz-form-hint">{{ field.help }}</p>
    {% endif %}
    {% include "fragments/search_select.html" %}
    {% if error %}
    <p id="{{ error_id }}" class="dz-form-error" role="alert">{{ error }}</p>
    {% endif %}

  {% elif field.ref_entity %}
    {# Entity-ref fields render as TomSelect comboboxes with remote
       load (#939). The framework previously had two paths here — one
       Alpine + x-for that populated an empty select, one TomSelect
       that loaded via its own callback. The Alpine path was the
       implicit default and the TomSelect path opt-in via
       widget=combobox; both fetched the same FK list endpoint with
       different lifecycles, contending over the same DOM node when
       both fired (the wrapper-on-wrapper smell from #927).

       The single path now: empty <select> + data-dz-ref-api, the
       widget registry's combobox load callback fetches options from
       `__display__` (#928) at first focus / preload. Removes ~50
       LOC of bespoke client display-field fallback that's now stale
       (`__display__` covers it server-side) and eliminates the
       three-lifecycle contention by deleting the contention. #}
    <label for="field-{{ field.name }}" class="dz-form-label">
      {{ field.label }}
      {% if field.required %}
        <span class="dz-form-required" aria-hidden="true">*</span>
        <span class="visually-hidden">(required)</span>
      {% endif %}
    </label>
    {% if field.help is defined and field.help %}
    <p id="hint-{{ field.name }}" class="dz-form-hint">{{ field.help }}</p>
    {% endif %}
    <select id="field-{{ field.name }}" name="{{ field.name }}"
            data-dazzle-field="{{ field.name }}"
            data-dz-widget="combobox"
            data-dz-ref-entity="{{ field.ref_entity }}"
            data-dz-ref-api="{{ field.ref_api }}"
            data-dz-options='{}'
            class="dz-form-input"
            {% if field.placeholder %}placeholder="{{ field.placeholder }}"{% endif %}
            {% if field.required %}required aria-required="true"{% endif %}
            {% if errors.get(field.name) %}aria-invalid="true" aria-describedby="error-{{ field.name }}{% if field.help %} hint-{{ field.name }}{% endif %}"{% elif field.help %}aria-describedby="hint-{{ field.name }}"{% endif %}>
      {# Pre-selected value: the TomSelect load callback resolves
         the human label on first focus/preload; until then this
         option preserves form integrity (the right ID is submitted)
         across re-render. #}
      {% if values.get(field.name) %}
      <option value="{{ values.get(field.name) }}" selected>{{ values.get(field.name) }}</option>
      {% endif %}
    </select>
    {% if errors.get(field.name) %}
    <p id="error-{{ field.name }}" class="dz-form-error" role="alert">{{ errors[field.name] }}</p>
    {% endif %}

  {# ── Vendored widget overrides (Phase 4) ─────────────────────────── #}
  {% elif field.widget == "combobox" %}
  {# UX-009: combobox widget — TomSelect wrapper #}
  <label for="field-{{ field.name }}" class="dz-form-label">
    {{ field.label }}
    {% if field.required %}
      <span class="dz-form-required" aria-hidden="true">*</span>
      <span class="visually-hidden">(required)</span>
    {% endif %}
  </label>
  {% if field.help %}
  <p id="hint-{{ field.name }}" class="dz-form-hint">{{ field.help }}</p>
  {% endif %}
  <select id="field-{{ field.name }}" name="{{ field.name }}"
          data-dz-widget="combobox"
          data-dz-options='{}'
          class="dz-form-input"
          {% if field.placeholder %}placeholder="{{ field.placeholder }}"{% endif %}
          {% if field.required %}required aria-required="true"{% endif %}
          {% if errors.get(field.name) %}aria-invalid="true" aria-describedby="error-{{ field.name }}{% if field.help %} hint-{{ field.name }}{% endif %}"{% elif field.help %}aria-describedby="hint-{{ field.name }}"{% endif %}>
    <option value="">{{ field.placeholder or 'Select...' }}</option>
    {% for opt in field.options %}
    <option value="{{ opt.value }}" {% if values.get(field.name) == opt.value|string %}selected{% endif %}>{{ opt.label }}</option>
    {% endfor %}
  </select>
  {% if errors.get(field.name) %}
  <p id="error-{{ field.name }}" class="dz-form-error" role="alert">{{ errors[field.name] }}</p>
  {% endif %}

  {% elif field.widget == "multi_select" %}
  {# UX-021: multiselect widget — TomSelect with remove_button plugin #}
  <label for="field-{{ field.name }}" class="dz-form-label">
    {{ field.label }}
    {% if field.required %}
      <span class="dz-form-required" aria-hidden="true">*</span>
      <span class="visually-hidden">(required)</span>
    {% endif %}
  </label>
  {% if field.help %}
  <p id="hint-{{ field.name }}" class="dz-form-hint">{{ field.help }}</p>
  {% endif %}
  <select id="field-{{ field.name }}" name="{{ field.name }}"
          data-dz-widget="multiselect"
          data-dz-options='{"plugins":["remove_button"]}'
          class="dz-form-input"
          multiple
          {% if field.placeholder %}placeholder="{{ field.placeholder }}"{% endif %}
          {% if field.required %}required aria-required="true"{% endif %}
          {% if errors.get(field.name) %}aria-invalid="true" aria-describedby="error-{{ field.name }}{% if field.help %} hint-{{ field.name }}{% endif %}"{% elif field.help %}aria-describedby="hint-{{ field.name }}"{% endif %}>
    {% for opt in field.options %}
    <option value="{{ opt.value }}" {% if opt.value|string in (values.get(field.name) or []) %}selected{% endif %}>{{ opt.label }}</option>
    {% endfor %}
  </select>
  {% if errors.get(field.name) %}
  <p id="error-{{ field.name }}" class="dz-form-error" role="alert">{{ errors[field.name] }}</p>
  {% endif %}

  {% elif field.widget == "tags" %}
  {# UX-022: tags widget — TomSelect with create:true #}
  <label for="field-{{ field.name }}" class="dz-form-label">
    {{ field.label }}
    {% if field.required %}
      <span class="dz-form-required" aria-hidden="true">*</span>
      <span class="visually-hidden">(required)</span>
    {% endif %}
  </label>
  {% if field.help %}
  <p id="hint-{{ field.name }}" class="dz-form-hint">{{ field.help }}</p>
  {% endif %}
  <input id="field-{{ field.name }}" name="{{ field.name }}" type="text"
         data-dz-widget="tags"
         data-dz-options='{"create":true,"plugins":["remove_button"]}'
         class="dz-form-input"
         value="{{ values.get(field.name, '') }}"
         {% if field.placeholder %}placeholder="{{ field.placeholder }}"{% endif %}
         {% if field.required %}required aria-required="true"{% endif %}
         {% if errors.get(field.name) %}aria-invalid="true" aria-describedby="error-{{ field.name }}{% if field.help %} hint-{{ field.name }}{% endif %}"{% elif field.help %}aria-describedby="hint-{{ field.name }}"{% endif %}>
  {% if errors.get(field.name) %}
  <p id="error-{{ field.name }}" class="dz-form-error" role="alert">{{ errors[field.name] }}</p>
  {% endif %}

  {% elif field.widget == "picker" and field.type in ("date", "datetime") %}
  {# UX-010: datepicker widget (single) — Flatpickr wrapper #}
  <label for="field-{{ field.name }}" class="dz-form-label">
    {{ field.label }}
    {% if field.required %}
      <span class="dz-form-required" aria-hidden="true">*</span>
      <span class="visually-hidden">(required)</span>
    {% endif %}
  </label>
  {% if field.help %}
  <p id="hint-{{ field.name }}" class="dz-form-hint">{{ field.help }}</p>
  {% endif %}
  <input id="field-{{ field.name }}" name="{{ field.name }}" type="text"
         data-dz-widget="datepicker"
         data-dz-options='{"dateFormat":"{{ "Y-m-d H:i" if field.type == "datetime" else "Y-m-d" }}"{% if field.type == "datetime" %},"enableTime":true{% endif %}}'
         class="dz-form-input"
         value="{{ values.get(field.name, field.default or '') }}"
         {% if field.placeholder %}placeholder="{{ field.placeholder }}"{% endif %}
         {% if field.required %}required aria-required="true"{% endif %}
         {% if errors.get(field.name) %}aria-invalid="true" aria-describedby="error-{{ field.name }}{% if field.help %} hint-{{ field.name }}{% endif %}"{% elif field.help %}aria-describedby="hint-{{ field.name }}"{% endif %}>
  {% if errors.get(field.name) %}
  <p id="error-{{ field.name }}" class="dz-form-error" role="alert">{{ errors[field.name] }}</p>
  {% endif %}

  {% elif field.widget == "range" and field.type in ("date", "datetime") %}
  {# UX-010: datepicker widget (range) — Flatpickr wrapper #}
  <label for="field-{{ field.name }}" class="dz-form-label">
    {{ field.label }}
    {% if field.required %}
      <span class="dz-form-required" aria-hidden="true">*</span>
      <span class="visually-hidden">(required)</span>
    {% endif %}
  </label>
  {% if field.help %}
  <p id="hint-{{ field.name }}" class="dz-form-hint">{{ field.help }}</p>
  {% endif %}
  <input id="field-{{ field.name }}" name="{{ field.name }}" type="text"
         data-dz-widget="daterange"
         data-dz-options='{"mode":"range","dateFormat":"Y-m-d"}'
         class="dz-form-input"
         value="{{ values.get(field.name, '') }}"
         placeholder="{{ field.placeholder or 'Select date range...' }}"
         {% if field.required %}required aria-required="true"{% endif %}
         {% if errors.get(field.name) %}aria-invalid="true" aria-describedby="error-{{ field.name }}{% if field.help %} hint-{{ field.name }}{% endif %}"{% elif field.help %}aria-describedby="hint-{{ field.name }}"{% endif %}>
  {% if errors.get(field.name) %}
  <p id="error-{{ field.name }}" class="dz-form-error" role="alert">{{ errors[field.name] }}</p>
  {% endif %}

  {% elif field.widget == "color" %}
  {# UX-024: native <input type="color"> (#976 — dropped Pickr).
     Native input covers every actual usage in the example apps. The
     hex display next to it is a small read-out of the current value;
     it stays in sync via the dzColorWidget Alpine binding (no JS
     library needed). #}
  <label for="field-{{ field.name }}" class="dz-form-label">
    {{ field.label }}
    {% if field.required %}
      <span class="dz-form-required" aria-hidden="true">*</span>
      <span class="visually-hidden">(required)</span>
    {% endif %}
  </label>
  {% if field.help %}
  <p id="hint-{{ field.name }}" class="dz-form-hint">{{ field.help }}</p>
  {% endif %}
  <div class="dz-form-color-group" x-data="{ value: '{{ values.get(field.name, field.default or '#3b82f6') }}' }">
    <input type="color"
           id="field-{{ field.name }}"
           name="{{ field.name }}"
           class="dz-form-color-input"
           x-model="value"
           {% if field.required %}required aria-required="true"{% endif %}
           {% if errors.get(field.name) %}aria-invalid="true" aria-describedby="error-{{ field.name }}{% if field.help %} hint-{{ field.name }}{% endif %}"{% elif field.help %}aria-describedby="hint-{{ field.name }}"{% endif %}>
    <span class="dz-form-color-hex" aria-hidden="true" x-text="value">{{ values.get(field.name, field.default or '#3b82f6') }}</span>
  </div>
  {% if errors.get(field.name) %}
  <p id="error-{{ field.name }}" class="dz-form-error" role="alert">{{ errors[field.name] }}</p>
  {% endif %}

  {% elif field.widget == "rich_text" %}
  {# UX-025 / #977 cycle 4: richtext widget — dz-richtext (Dazzle-native). #}
  <label for="field-{{ field.name }}" class="dz-form-label">
    {{ field.label }}
    {% if field.required %}
      <span class="dz-form-required" aria-hidden="true">*</span>
      <span class="visually-hidden">(required)</span>
    {% endif %}
  </label>
  {% if field.help %}
  <p id="hint-{{ field.name }}" class="dz-form-hint">{{ field.help }}</p>
  {% endif %}
  {%- set _rt_opts = {} -%}
  {%- if field.extra is defined and field.extra -%}
    {%- if field.extra.rich_text_toolbar -%}
      {%- set _ = _rt_opts.update({'toolbar': field.extra.rich_text_toolbar}) -%}
    {%- endif -%}
    {%- if field.extra.rich_text_max_length -%}
      {%- set _ = _rt_opts.update({'maxLength': field.extra.rich_text_max_length}) -%}
    {%- endif -%}
  {%- endif -%}
  <div data-dz-widget="richtext" data-dz-options='{{ _rt_opts | tojson }}'
       class="dz-form-richtext"
       {% if errors.get(field.name) %}aria-invalid="true"{% endif %}>
    <input type="hidden" id="field-{{ field.name }}" name="{{ field.name }}"
           value="{{ values.get(field.name, '') }}"
           {% if field.required %}required aria-required="true"{% endif %}
           {% if errors.get(field.name) %}aria-invalid="true" aria-describedby="error-{{ field.name }}{% if field.help %} hint-{{ field.name }}{% endif %}"{% elif field.help %}aria-describedby="hint-{{ field.name }}"{% endif %}>
    <div data-dz-editor></div>
  </div>
  {% if errors.get(field.name) %}
  <p id="error-{{ field.name }}" class="dz-form-error" role="alert">{{ errors[field.name] }}</p>
  {% endif %}

  {% elif field.widget == "slider" %}
  {# UX-023: slider widget — native <input type="range"> + dzRangeTooltip controller #}
  <label for="field-{{ field.name }}" class="dz-form-label">
    {{ field.label }}
    {% if field.required %}
      <span class="dz-form-required" aria-hidden="true">*</span>
      <span class="visually-hidden">(required)</span>
    {% endif %}
  </label>
  {% if field.help %}
  <p id="hint-{{ field.name }}" class="dz-form-hint">{{ field.help }}</p>
  {% endif %}
  <div data-dz-widget="range-tooltip" class="dz-form-slider-group">
    <input id="field-{{ field.name }}" name="{{ field.name }}" type="range"
           data-dz-slider
           class="dz-form-slider"
           min="{{ field.extra.min | default(0) }}"
           max="{{ field.extra.max | default(100) }}"
           step="{{ field.extra.step | default(1) }}"
           value="{{ values.get(field.name, field.default or '50') }}"
           {% if field.required %}required aria-required="true"{% endif %}
           {% if errors.get(field.name) %}aria-invalid="true" aria-describedby="error-{{ field.name }}{% if field.help %} hint-{{ field.name }}{% endif %}"{% elif field.help %}aria-describedby="hint-{{ field.name }}"{% endif %}>
    <span data-dz-range-value
          class="dz-form-slider-value"
          aria-hidden="true">{{ values.get(field.name, field.default or '50') }}</span>
  </div>
  {% if errors.get(field.name) %}
  <p id="error-{{ field.name }}" class="dz-form-error" role="alert">{{ errors[field.name] }}</p>
  {% endif %}

  {% else %}
    {# Standard fields: label above #}
    <label for="{{ field_id }}" class="dz-form-label">
      {{ field.label }}
      {% if field.required %}
        <span class="dz-form-required" aria-hidden="true">*</span>
        <span class="visually-hidden">(required)</span>
      {% endif %}
    </label>

    {% if field.help is defined and field.help %}
    <p id="{{ hint_id }}" class="dz-form-hint">
      {{ field.help }}
    </p>
    {% endif %}

    {% if field.type == "textarea" %}
      <textarea id="{{ field_id }}" name="{{ field.name }}"
                data-dazzle-field="{{ field.name }}"
                class="dz-form-input dz-form-textarea"
                placeholder="{{ field.placeholder }}"
                {% if field.required %}required aria-required="true"{% endif %}
                {% if error %}aria-invalid="true"{% endif %}
                {% if described_by %}aria-describedby="{{ described_by | join(' ') }}"{% endif %}
                rows="4">{{ value | default("", true) }}</textarea>

    {% elif field.type == "select" %}
      <select id="{{ field_id }}" name="{{ field.name }}"
              data-dazzle-field="{{ field.name }}"
              class="dz-form-input"
              {% if field.required %}required aria-required="true"{% endif %}
              {% if error %}aria-invalid="true"{% endif %}
              {% if described_by %}aria-describedby="{{ described_by | join(' ') }}"{% endif %}>
        <option value="" disabled {% if not value %}selected{% endif %}>
          {{ field.placeholder or ("Select " + field.label) }}
        </option>
        {% for opt in field.options %}
        <option value="{{ opt.value }}" {% if value == opt.value %}selected{% endif %}>
          {{ opt.label }}
        </option>
        {% endfor %}
      </select>

    {% elif field.type == "date" %}
      <input id="{{ field_id }}" type="date" name="{{ field.name }}"
             data-dazzle-field="{{ field.name }}"
             class="dz-form-input"
             value="{{ value | default('', true) }}"
             {% if field.required %}required aria-required="true"{% endif %}
             {% if error %}aria-invalid="true"{% endif %}
             {% if described_by %}aria-describedby="{{ described_by | join(' ') }}"{% endif %} />

    {% elif field.type == "datetime" %}
      <input id="{{ field_id }}" type="datetime-local" name="{{ field.name }}"
             data-dazzle-field="{{ field.name }}"
             class="dz-form-input"
             value="{{ value | default('', true) }}"
             {% if field.required %}required aria-required="true"{% endif %}
             {% if error %}aria-invalid="true"{% endif %}
             {% if described_by %}aria-describedby="{{ described_by | join(' ') }}"{% endif %} />

    {% elif field.type == "money" %}
      {# UX-026: money widget — dzMoney Alpine, semantic CSS chrome #}
      {% set minor_val = values.get(field.name ~ '_minor', '') if values else '' %}
      {% if field.extra.get('currency_fixed', true) %}
      {# Pinned currency — static prefix symbol #}
      <div x-data="dzMoney" data-dz-currency="{{ field.extra.currency_code }}"
           data-dz-scale="{{ field.extra.scale }}">
        <div class="dz-form-money-group">
          <span class="dz-form-money-prefix" aria-hidden="true">
            {{ field.extra.symbol }}
          </span>
          <input type="text" inputmode="decimal" id="{{ field_id }}"
                 data-dazzle-field="{{ field.name }}"
                 x-model="displayValue" @input="onInput()" @blur="onBlur()"
                 class="dz-form-input dz-form-input-trailing"
                 placeholder="0.00"
                 aria-label="{{ field.label }} ({{ field.extra.currency_code }})"
                 {% if field.required %}required aria-required="true"{% endif %}
                 {% if error %}aria-invalid="true"{% endif %}
                 {% if described_by %}aria-describedby="{{ described_by | join(' ') }}"{% endif %} />
        </div>
        <input type="hidden" name="{{ field.name }}_minor" x-model="minorValue"
               x-init="minorValue = '{{ minor_val }}'" />
        <input type="hidden" name="{{ field.name }}_currency"
               value="{{ field.extra.currency_code }}" />
      </div>
      {% else %}
      {# Unpinned currency — dropdown selector #}
      <div x-data="dzMoney" data-dz-scale="{{ field.extra.scale }}">
        <div class="dz-form-money-group">
          <select name="{{ field.name }}_currency"
                  @change="onCurrencyChange($event)"
                  class="dz-form-money-select"
                  aria-label="Currency for {{ field.label }}">
            {% for opt in field.extra.get('currency_options', []) %}
            <option value="{{ opt.code }}" data-scale="{{ opt.scale }}"
                    data-symbol="{{ opt.symbol }}"
                    {% if opt.code == field.extra.currency_code %}selected{% endif %}>
              {{ opt.symbol }} {{ opt.code }}
            </option>
            {% endfor %}
          </select>
          <input type="text" inputmode="decimal" id="{{ field_id }}"
                 data-dazzle-field="{{ field.name }}"
                 x-model="displayValue" @input="onInput()" @blur="onBlur()"
                 class="dz-form-input dz-form-input-trailing"
                 placeholder="0.00"
                 aria-label="{{ field.label }}"
                 {% if field.required %}required aria-required="true"{% endif %}
                 {% if error %}aria-invalid="true"{% endif %}
                 {% if described_by %}aria-describedby="{{ described_by | join(' ') }}"{% endif %} />
        </div>
        <input type="hidden" name="{{ field.name }}_minor" x-model="minorValue"
               x-init="minorValue = '{{ minor_val }}'" />
      </div>
      {% endif %}

    {% elif field.type == "number" %}
      <input id="{{ field_id }}" type="number" name="{{ field.name }}"
             data-dazzle-field="{{ field.name }}"
             class="dz-form-input"
             value="{{ value | default('', true) }}"
             placeholder="{{ field.placeholder }}"
             {% if field.required %}required aria-required="true"{% endif %}
             {% if error %}aria-invalid="true"{% endif %}
             {% if described_by %}aria-describedby="{{ described_by | join(' ') }}"{% endif %} />

    {% elif field.type == "email" %}
      <input id="{{ field_id }}" type="email" name="{{ field.name }}"
             data-dazzle-field="{{ field.name }}"
             class="dz-form-input"
             value="{{ value | default('', true) }}"
             placeholder="{{ field.placeholder }}"
             {% if field.required %}required aria-required="true"{% endif %}
             {% if error %}aria-invalid="true"{% endif %}
             {% if described_by %}aria-describedby="{{ described_by | join(' ') }}"{% endif %} />

    {% elif field.type == "file" %}
      {# UX-027: file upload — Alpine dzFileUpload + semantic CSS #}
      <div x-data="dzFileUpload" data-dz-file="{{ field.name }}" class="dz-file-upload"
           {% if value %}x-init='hasFile = true; filename = {{ (value | default("", true) | basename_or_url) | tojson }}'{% endif %}>
        <input type="hidden" name="{{ field.name }}" id="{{ field_id }}"
               data-dazzle-field="{{ field.name }}" data-dz-file-value
               value="{{ value | default('', true) }}"
               {% if error %}aria-invalid="true"{% endif %}
               {% if described_by %}aria-describedby="{{ described_by | join(' ') }}"{% endif %} />
        {# File preview (shown when file exists) #}
        <div x-show="hasFile" class="dz-file-upload-preview">
          <svg xmlns="http://www.w3.org/2000/svg" class="dz-file-upload-preview-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <span class="dz-file-upload-preview-name" x-text="filename"></span>
          <button type="button" @click="clear()"
                  class="dz-file-upload-preview-clear"
                  aria-label="Remove file">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
        {# Dropzone (shown when no file) #}
        <label x-show="!hasFile"
               @dragover.prevent="dragging = true"
               @dragleave="dragging = false"
               @drop="onDrop($event)"
               :class="dragging && 'dragging'"
               class="dz-file-upload-zone">
          <svg xmlns="http://www.w3.org/2000/svg" class="dz-file-upload-zone-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
          </svg>
          <p class="dz-file-upload-zone-prompt">Click to upload or drag and drop</p>
          <input type="file" hidden data-dz-file-input
                 @change="selectFile($event)"
                 accept="{{ field.extra.get('accept', '*/*') }}"
                 {% if field.extra.get('capture') %}capture="{{ field.extra.capture }}"{% endif %}
                 {% if field.required and not value %}required aria-required="true"{% endif %} />
        </label>
        {# Upload progress #}
        <div x-show="uploading">
          <progress data-dz-file-progress class="dz-file-upload-progress" max="100"></progress>
        </div>
        {# Client-side error message — distinct from server errors #}
        <p x-show="error" class="dz-form-error" x-text="error" role="alert"></p>
      </div>

    {% else %}
      {# Default: text input #}
      <input id="{{ field_id }}" type="text" name="{{ field.name }}"
             data-dazzle-field="{{ field.name }}"
             class="dz-form-input"
             value="{{ value | default('', true) }}"
             placeholder="{{ field.placeholder }}"
             {% if field.required %}required aria-required="true"{% endif %}
             {% if error %}aria-invalid="true"{% endif %}
             {% if described_by %}aria-describedby="{{ described_by | join(' ') }}"{% endif %} />
    {% endif %}
  {% endif %}

  {% if error %}
  <p id="{{ error_id }}" class="dz-form-error" role="alert">
    {{ error }}
  </p>
  {% endif %}
</div>
{% endmacro %}