{# Form field macros - renders the appropriate input for each field type #}
{# Contract: ~/.claude/skills/ux-architect/components/form-field.md (UX-017) #}
{# Core branches: pure Tailwind + design-system variables. #}
{# Widget branches (combobox, multi_select, tags, picker, range, color,   #}
{# rich_text, slider, money, file, search-select) retain their own markup #}
{# and are out of scope for UX-017 — tracked by UX-009..015.              #}

{% 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.hint is defined and field.hint else "" %}
{% set described_by = ([error_id] if error else []) + ([hint_id] if hint_id else []) %}
{% set base_input = "w-full h-8 px-3 rounded-[4px] bg-[hsl(var(--background))] border text-[13px] text-[hsl(var(--foreground))] placeholder:text-[hsl(var(--muted-foreground))] focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))] transition-[box-shadow,border-color] duration-[120ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]" %}
{% set border_idle = "border-[hsl(var(--border))]" %}
{% set border_error = "border-[hsl(var(--destructive))]" %}

<div class="w-full space-y-1">
  {% if field.type == "checkbox" %}
    {# Checkbox: label wraps input + text (inline row) #}
    <label class="inline-flex items-center gap-2 cursor-pointer text-[13px] text-[hsl(var(--foreground))]">
      <input type="checkbox" name="{{ field.name }}"
             id="{{ field_id }}"
             data-dazzle-field="{{ field.name }}"
             class="h-4 w-4 rounded-[3px] accent-[hsl(var(--primary))]"
             {% if error %}aria-invalid="true"{% endif %}
             {% if described_by %}aria-describedby="{{ described_by | join(' ') }}"{% endif %}
             {% if value %}checked{% endif %} />
      <span>{{ field.label }}</span>
    </label>

  {% elif field.source %}
    {# UX-028: search-select dynamic search with autofill #}
    <label for="search-input-{{ field.name }}" class="block text-[13px] font-medium text-[hsl(var(--foreground))]">
      {{ field.label }}
      {% if field.required %}
        <span class="text-[hsl(var(--destructive))]" aria-hidden="true">*</span>
        <span class="sr-only">(required)</span>
      {% endif %}
    </label>
    {% if field.hint is defined and field.hint %}
    <p id="{{ hint_id }}" class="text-[12px] text-[hsl(var(--muted-foreground))]">{{ field.hint }}</p>
    {% endif %}
    {% include "fragments/search_select.html" %}
    {% if error %}
    <p id="{{ error_id }}" class="text-[12px] text-[hsl(var(--destructive))] mt-1" role="alert">{{ error }}</p>
    {% endif %}

  {% elif field.ref_entity %}
    {# Entity-ref auto-wiring (cycle 236 — closes EX-044).
       When a DSL field is a plain `ref Entity` with no explicit `source:`
       override, the template compiler populates ref_entity + ref_api from
       the IR and the form renders a select that hydrates options from the
       entity's list endpoint. Mirrors the Alpine fetch pattern already
       used by filter_bar.html for ref/belongs_to column filters. #}
    <label for="field-{{ field.name }}" class="block text-[13px] font-medium text-[hsl(var(--foreground))]">
      {{ field.label }}
      {% if field.required %}
        <span class="text-[hsl(var(--destructive))]" aria-hidden="true">*</span>
        <span class="sr-only">(required)</span>
      {% endif %}
    </label>
    {% if field.hint is defined and field.hint %}
    <p id="hint-{{ field.name }}" class="text-[12px] text-[hsl(var(--muted-foreground))]">{{ field.hint }}</p>
    {% endif %}
    <select id="field-{{ field.name }}" name="{{ field.name }}"
            data-dazzle-field="{{ field.name }}"
            data-dz-ref-entity="{{ field.ref_entity }}"
            data-dz-ref-api="{{ field.ref_api }}"
            {% if field.required %}required aria-required="true"{% endif %}
            {% if errors.get(field.name) %}aria-invalid="true" aria-describedby="error-{{ field.name }}{% if field.hint %} hint-{{ field.name }}{% endif %}"{% elif field.hint %}aria-describedby="hint-{{ field.name }}"{% endif %}
            class="w-full h-8 px-3 rounded-[4px] bg-[hsl(var(--background))] border {% if errors.get(field.name) %}border-[hsl(var(--destructive))]{% else %}border-[hsl(var(--border))]{% endif %} text-[13px] text-[hsl(var(--foreground))] focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))] transition-[box-shadow,border-color] duration-[120ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]"
            x-data="{ options: [], loading: true, current: '{{ values.get(field.name) if values else '' }}' }"
            x-init="
              fetch('{{ field.ref_api }}?page_size=100', { headers: { 'Accept': 'application/json' } })
                .then(r => r.json())
                .then(data => {
                  const items = data.items || [];
                  const display = (item) => {
                    return item.__display__ || item.name || item.company_name
                      || ((item.first_name || '') + ' ' + (item.last_name || '')).trim()
                      || item.title || item.label || item.email || item.id || '';
                  };
                  options = items.map(i => ({ value: i.id, label: display(i) }));
                  loading = false;
                })
                .catch(() => { loading = false; })
            ">
      <option value="">{{ field.placeholder or ('Select ' + field.label + '…') }}</option>
      <template x-for="opt in options" :key="opt.value">
        <option :value="opt.value"
                x-text="opt.label"
                :selected="current === opt.value">
        </option>
      </template>
    </select>
    {% if errors.get(field.name) %}
    <p id="error-{{ field.name }}" class="text-[12px] text-[hsl(var(--destructive))] mt-1" role="alert">{{ errors[field.name] }}</p>
    {% endif %}

  {# ── Vendored widget overrides (Phase 4) ─────────────────────────── #}
  {% elif field.widget == "combobox" %}
  {# UX-009: combobox widget — TomSelect wrapper, pure Tailwind chrome #}
  <div class="w-full space-y-1">
    <label for="field-{{ field.name }}" class="block text-[13px] font-medium text-[hsl(var(--foreground))]">
      {{ field.label }}
      {% if field.required %}
        <span class="text-[hsl(var(--destructive))]" aria-hidden="true">*</span>
        <span class="sr-only">(required)</span>
      {% endif %}
    </label>
    {% if field.hint %}
    <p id="hint-{{ field.name }}" class="text-[12px] text-[hsl(var(--muted-foreground))]">{{ field.hint }}</p>
    {% endif %}
    <select id="field-{{ field.name }}" name="{{ field.name }}"
            data-dz-widget="combobox"
            data-dz-options='{}'
            {% 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.hint %} hint-{{ field.name }}{% endif %}"{% elif field.hint %}aria-describedby="hint-{{ field.name }}"{% endif %}
            class="w-full h-8 px-3 rounded-[4px] bg-[hsl(var(--background))] border {% if errors.get(field.name) %}border-[hsl(var(--destructive))]{% else %}border-[hsl(var(--border))]{% endif %} text-[13px] text-[hsl(var(--foreground))] focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))] transition-[box-shadow,border-color] duration-[120ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]">
      <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="text-[12px] text-[hsl(var(--destructive))] mt-1" role="alert">{{ errors[field.name] }}</p>
    {% endif %}
  </div>

  {% elif field.widget == "multi_select" %}
  {# UX-021: multiselect widget — TomSelect with remove_button plugin, pure Tailwind chrome #}
  <div class="w-full space-y-1">
    <label for="field-{{ field.name }}" class="block text-[13px] font-medium text-[hsl(var(--foreground))]">
      {{ field.label }}
      {% if field.required %}
        <span class="text-[hsl(var(--destructive))]" aria-hidden="true">*</span>
        <span class="sr-only">(required)</span>
      {% endif %}
    </label>
    {% if field.hint %}
    <p id="hint-{{ field.name }}" class="text-[12px] text-[hsl(var(--muted-foreground))]">{{ field.hint }}</p>
    {% endif %}
    <select id="field-{{ field.name }}" name="{{ field.name }}"
            data-dz-widget="multiselect"
            data-dz-options='{"plugins":["remove_button"]}'
            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.hint %} hint-{{ field.name }}{% endif %}"{% elif field.hint %}aria-describedby="hint-{{ field.name }}"{% endif %}
            class="w-full h-8 px-3 rounded-[4px] bg-[hsl(var(--background))] border {% if errors.get(field.name) %}border-[hsl(var(--destructive))]{% else %}border-[hsl(var(--border))]{% endif %} text-[13px] text-[hsl(var(--foreground))] focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))] transition-[box-shadow,border-color] duration-[120ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]">
      {% 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="text-[12px] text-[hsl(var(--destructive))] mt-1" role="alert">{{ errors[field.name] }}</p>
    {% endif %}
  </div>

  {% elif field.widget == "tags" %}
  {# UX-022: tags widget — TomSelect with create:true, pure Tailwind chrome #}
  <div class="w-full space-y-1">
    <label for="field-{{ field.name }}" class="block text-[13px] font-medium text-[hsl(var(--foreground))]">
      {{ field.label }}
      {% if field.required %}
        <span class="text-[hsl(var(--destructive))]" aria-hidden="true">*</span>
        <span class="sr-only">(required)</span>
      {% endif %}
    </label>
    {% if field.hint %}
    <p id="hint-{{ field.name }}" class="text-[12px] text-[hsl(var(--muted-foreground))]">{{ field.hint }}</p>
    {% endif %}
    <input id="field-{{ field.name }}" name="{{ field.name }}" type="text"
           data-dz-widget="tags"
           data-dz-options='{"create":true,"plugins":["remove_button"]}'
           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.hint %} hint-{{ field.name }}{% endif %}"{% elif field.hint %}aria-describedby="hint-{{ field.name }}"{% endif %}
           class="w-full h-8 px-3 rounded-[4px] bg-[hsl(var(--background))] border {% if errors.get(field.name) %}border-[hsl(var(--destructive))]{% else %}border-[hsl(var(--border))]{% endif %} text-[13px] text-[hsl(var(--foreground))] placeholder:text-[hsl(var(--muted-foreground))] focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))] transition-[box-shadow,border-color] duration-[120ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]">
    {% if errors.get(field.name) %}
    <p id="error-{{ field.name }}" class="text-[12px] text-[hsl(var(--destructive))] mt-1" role="alert">{{ errors[field.name] }}</p>
    {% endif %}
  </div>

  {% elif field.widget == "picker" and field.type in ("date", "datetime") %}
  {# UX-010: datepicker widget (single) — Flatpickr wrapper, pure Tailwind chrome #}
  <div class="w-full space-y-1">
    <label for="field-{{ field.name }}" class="block text-[13px] font-medium text-[hsl(var(--foreground))]">
      {{ field.label }}
      {% if field.required %}
        <span class="text-[hsl(var(--destructive))]" aria-hidden="true">*</span>
        <span class="sr-only">(required)</span>
      {% endif %}
    </label>
    {% if field.hint %}
    <p id="hint-{{ field.name }}" class="text-[12px] text-[hsl(var(--muted-foreground))]">{{ field.hint }}</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 %}}'
           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.hint %} hint-{{ field.name }}{% endif %}"{% elif field.hint %}aria-describedby="hint-{{ field.name }}"{% endif %}
           class="w-full h-8 px-3 rounded-[4px] bg-[hsl(var(--background))] border {% if errors.get(field.name) %}border-[hsl(var(--destructive))]{% else %}border-[hsl(var(--border))]{% endif %} text-[13px] text-[hsl(var(--foreground))] placeholder:text-[hsl(var(--muted-foreground))] focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))] transition-[box-shadow,border-color] duration-[120ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]">
    {% if errors.get(field.name) %}
    <p id="error-{{ field.name }}" class="text-[12px] text-[hsl(var(--destructive))] mt-1" role="alert">{{ errors[field.name] }}</p>
    {% endif %}
  </div>

  {% elif field.widget == "range" and field.type in ("date", "datetime") %}
  {# UX-010: datepicker widget (range) — Flatpickr wrapper, pure Tailwind chrome #}
  <div class="w-full space-y-1">
    <label for="field-{{ field.name }}" class="block text-[13px] font-medium text-[hsl(var(--foreground))]">
      {{ field.label }}
      {% if field.required %}
        <span class="text-[hsl(var(--destructive))]" aria-hidden="true">*</span>
        <span class="sr-only">(required)</span>
      {% endif %}
    </label>
    {% if field.hint %}
    <p id="hint-{{ field.name }}" class="text-[12px] text-[hsl(var(--muted-foreground))]">{{ field.hint }}</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"}'
           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.hint %} hint-{{ field.name }}{% endif %}"{% elif field.hint %}aria-describedby="hint-{{ field.name }}"{% endif %}
           class="w-full h-8 px-3 rounded-[4px] bg-[hsl(var(--background))] border {% if errors.get(field.name) %}border-[hsl(var(--destructive))]{% else %}border-[hsl(var(--border))]{% endif %} text-[13px] text-[hsl(var(--foreground))] placeholder:text-[hsl(var(--muted-foreground))] focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))] transition-[box-shadow,border-color] duration-[120ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]">
    {% if errors.get(field.name) %}
    <p id="error-{{ field.name }}" class="text-[12px] text-[hsl(var(--destructive))] mt-1" role="alert">{{ errors[field.name] }}</p>
    {% endif %}
  </div>

  {% elif field.widget == "color" %}
  {# UX-024: colorpicker widget — Pickr wrapper, pure Tailwind chrome #}
  <div class="w-full space-y-1">
    <label class="block text-[13px] font-medium text-[hsl(var(--foreground))]">
      {{ field.label }}
      {% if field.required %}
        <span class="text-[hsl(var(--destructive))]" aria-hidden="true">*</span>
        <span class="sr-only">(required)</span>
      {% endif %}
    </label>
    {% if field.hint %}
    <p id="hint-{{ field.name }}" class="text-[12px] text-[hsl(var(--muted-foreground))]">{{ field.hint }}</p>
    {% endif %}
    <div data-dz-widget="colorpicker" class="flex items-center gap-3">
      <div class="pcr-trigger h-8 w-8 rounded-[4px] border border-[hsl(var(--border))] cursor-pointer transition-[filter] duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)] hover:brightness-105"
           style="background: {{ values.get(field.name, field.default or '#3b82f6') }}"
           aria-label="Color swatch, click to change">
      </div>
      <input type="hidden" id="field-{{ field.name }}" name="{{ field.name }}"
             value="{{ values.get(field.name, field.default or '#3b82f6') }}"
             {% if field.required %}required aria-required="true"{% endif %}
             {% if errors.get(field.name) %}aria-invalid="true" aria-describedby="error-{{ field.name }}{% if field.hint %} hint-{{ field.name }}{% endif %}"{% elif field.hint %}aria-describedby="hint-{{ field.name }}"{% endif %}>
      <span class="text-[12px] font-mono text-[hsl(var(--muted-foreground))]" aria-hidden="true">{{ values.get(field.name, field.default or '#3b82f6') }}</span>
    </div>
    {% if errors.get(field.name) %}
    <p id="error-{{ field.name }}" class="text-[12px] text-[hsl(var(--destructive))] mt-1" role="alert">{{ errors[field.name] }}</p>
    {% endif %}
  </div>

  {% elif field.widget == "rich_text" %}
  {# UX-025: richtext widget — Quill editor wrapper, pure Tailwind chrome #}
  <div class="w-full space-y-1">
    <label for="field-{{ field.name }}" class="block text-[13px] font-medium text-[hsl(var(--foreground))]">
      {{ field.label }}
      {% if field.required %}
        <span class="text-[hsl(var(--destructive))]" aria-hidden="true">*</span>
        <span class="sr-only">(required)</span>
      {% endif %}
    </label>
    {% if field.hint %}
    <p id="hint-{{ field.name }}" class="text-[12px] text-[hsl(var(--muted-foreground))]">{{ field.hint }}</p>
    {% endif %}
    <div data-dz-widget="richtext" data-dz-options='{}'
         class="border {% if errors.get(field.name) %}border-[hsl(var(--destructive))]{% else %}border-[hsl(var(--border))]{% endif %} rounded-[4px] overflow-hidden bg-[hsl(var(--background))]">
      <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.hint %} hint-{{ field.name }}{% endif %}"{% elif field.hint %}aria-describedby="hint-{{ field.name }}"{% endif %}>
      <div data-dz-editor></div>
    </div>
    {% if errors.get(field.name) %}
    <p id="error-{{ field.name }}" class="text-[12px] text-[hsl(var(--destructive))] mt-1" role="alert">{{ errors[field.name] }}</p>
    {% endif %}
  </div>

  {% elif field.widget == "slider" %}
  {# UX-023: slider widget — native <input type="range"> + dzRangeTooltip controller #}
  <div class="w-full space-y-1">
    <label for="field-{{ field.name }}" class="block text-[13px] font-medium text-[hsl(var(--foreground))]">
      {{ field.label }}
      {% if field.required %}
        <span class="text-[hsl(var(--destructive))]" aria-hidden="true">*</span>
        <span class="sr-only">(required)</span>
      {% endif %}
    </label>
    {% if field.hint %}
    <p id="hint-{{ field.name }}" class="text-[12px] text-[hsl(var(--muted-foreground))]">{{ field.hint }}</p>
    {% endif %}
    <div data-dz-widget="range-tooltip" class="flex items-center gap-3">
      <input id="field-{{ field.name }}" name="{{ field.name }}" type="range"
             data-dz-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.hint %} hint-{{ field.name }}{% endif %}"{% elif field.hint %}aria-describedby="hint-{{ field.name }}"{% endif %}
             class="w-full">
      <span data-dz-range-value
            class="text-[12px] font-mono text-[hsl(var(--foreground))] min-w-8 text-right"
            aria-hidden="true">{{ values.get(field.name, field.default or '50') }}</span>
    </div>
    {% if errors.get(field.name) %}
    <p id="error-{{ field.name }}" class="text-[12px] text-[hsl(var(--destructive))] mt-1" role="alert">{{ errors[field.name] }}</p>
    {% endif %}
  </div>

  {% else %}
    {# Standard fields: label above #}
    <label for="{{ field_id }}" class="block text-[13px] font-medium text-[hsl(var(--foreground))]">
      {{ field.label }}
      {% if field.required %}
        <span class="text-[hsl(var(--destructive))]" aria-hidden="true">*</span>
        <span class="sr-only">(required)</span>
      {% endif %}
    </label>

    {% if field.hint is defined and field.hint %}
    <p id="{{ hint_id }}" class="text-[12px] text-[hsl(var(--muted-foreground))]">
      {{ field.hint }}
    </p>
    {% endif %}

    {% if field.type == "textarea" %}
      <textarea id="{{ field_id }}" name="{{ field.name }}"
                data-dazzle-field="{{ field.name }}"
                class="w-full px-3 py-2 min-h-24 resize-y rounded-[4px] bg-[hsl(var(--background))] border {% if error %}{{ border_error }}{% else %}{{ border_idle }}{% endif %} text-[13px] text-[hsl(var(--foreground))] placeholder:text-[hsl(var(--muted-foreground))] focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))] transition-[box-shadow,border-color] duration-[120ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]"
                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="{{ base_input }} {% if error %}{{ border_error }}{% else %}{{ border_idle }}{% endif %}"
              {% 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="{{ base_input }} {% if error %}{{ border_error }}{% else %}{{ border_idle }}{% endif %}"
             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="{{ base_input }} {% if error %}{{ border_error }}{% else %}{{ border_idle }}{% endif %}"
             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, pure Tailwind chrome #}
      {# Major-unit display input + hidden minor-unit value carrier       #}
      {% 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="flex w-full">
          <span class="h-8 inline-flex items-center px-3 bg-[hsl(var(--muted))] text-[13px] font-medium text-[hsl(var(--muted-foreground))] border border-r-0 border-[hsl(var(--border))] rounded-l-[4px] dz-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="h-8 px-3 w-full bg-[hsl(var(--background))] text-[13px] text-[hsl(var(--foreground))] placeholder:text-[hsl(var(--muted-foreground))] border {% if error %}{{ border_error }}{% else %}{{ border_idle }}{% endif %} rounded-r-[4px] focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))] transition-[box-shadow,border-color] duration-[120ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]"
                 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="flex w-full">
          <select name="{{ field.name }}_currency"
                  @change="onCurrencyChange($event)"
                  class="h-8 px-2 w-28 bg-[hsl(var(--background))] text-[13px] text-[hsl(var(--foreground))] border border-r-0 border-[hsl(var(--border))] rounded-l-[4px] focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))]"
                  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="h-8 px-3 w-full bg-[hsl(var(--background))] text-[13px] text-[hsl(var(--foreground))] placeholder:text-[hsl(var(--muted-foreground))] border {% if error %}{{ border_error }}{% else %}{{ border_idle }}{% endif %} rounded-r-[4px] focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))] transition-[box-shadow,border-color] duration-[120ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]"
                 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="{{ base_input }} {% if error %}{{ border_error }}{% else %}{{ border_idle }}{% endif %}"
             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="{{ base_input }} {% if error %}{{ border_error }}{% else %}{{ border_idle }}{% endif %}"
             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, pure Tailwind chrome #}
      <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 }}'"{% 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="flex items-center gap-2 p-3 mb-2 rounded-[4px] bg-[hsl(var(--muted))]">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0 text-[hsl(142_76%_36%)]" 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="text-[13px] truncate text-[hsl(var(--foreground))]" x-text="filename"></span>
          <button type="button" @click="clear()"
                  class="h-6 w-6 inline-flex items-center justify-center rounded-[4px] text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--muted))] hover:text-[hsl(var(--foreground))] ml-auto transition-colors duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]"
                  aria-label="Remove file">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" 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 && 'border-[hsl(var(--primary))] bg-[hsl(var(--muted)/0.5)]'"
               class="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-[hsl(var(--border))] rounded-[6px] cursor-pointer hover:bg-[hsl(var(--muted)/0.5)] transition-colors duration-[120ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]">
          <div class="flex flex-col items-center justify-center pt-5 pb-6">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mb-2 text-[hsl(var(--muted-foreground)/0.6)]" 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="text-[13px] text-[hsl(var(--muted-foreground))]">Click to upload or drag and drop</p>
          </div>
          <input type="file" class="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" class="mt-2">
          <progress data-dz-file-progress class="w-full h-1 rounded-[2px]" max="100"></progress>
        </div>
        {# Client-side error message (file-too-large, etc.) — distinct from server errors #}
        <p x-show="error" class="text-[12px] text-[hsl(var(--destructive))] mt-1" 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="{{ base_input }} {% if error %}{{ border_error }}{% else %}{{ border_idle }}{% endif %}"
             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="text-[12px] text-[hsl(var(--destructive))] mt-1" role="alert">
    {{ error }}
  </p>
  {% endif %}
</div>
{% endmacro %}