{% set value = values.get(field.name) %}
{% set error = errors.fields.get(field.name) %}
{% set widget = field_widget(field) %}
{% set control_base = 'mt-1 w-full rounded-md border bg-surface px-3 text-sm ' ~ ('border-danger' if error else 'border-input') %}
{% set control = 'h-9 ' ~ control_base %}
<div>
  <label for="f-{{ field.name }}" class="block text-sm font-medium">{{ field.label }}{% if field.required %} <span class="text-danger" aria-hidden="true">*</span>{% endif %}</label>
  {% if widget == 'checkbox' %}
  <input id="f-{{ field.name }}" type="checkbox" name="{{ field.name }}" value="on" {{ 'checked' if value }} {% if error %}aria-invalid="true"{% endif %} {{ 'disabled' if field.readonly }} class="mt-1 size-4 rounded-sm border-input">
  {% elif widget in ('textarea', 'json') %}
  <textarea id="f-{{ field.name }}" name="{{ field.name }}" rows="{{ 6 if widget == 'json' else 4 }}" {% if error %}aria-invalid="true"{% endif %} {{ 'readonly' if field.readonly }} class="py-2 {{ control_base }}{{ ' font-mono' if widget == 'json' }}">{{ value|json_pretty if widget == 'json' and value is not none and value is not string else value if value is not none else '' }}</textarea>
  {% elif widget == 'select' %}
  <div class="relative">
    <select name="{{ field.name }}" id="f-{{ field.name }}" {% if error %}aria-invalid="true"{% endif %} {{ 'disabled' if field.readonly }} class="appearance-none pr-8 {{ control }}">
      {% if not field.required %}<option value="">—</option>{% endif %}
      {% for choice in field.choices %}
      <option value="{{ choice[0] }}" {{ 'selected' if choice[0] == value }}>{{ choice[1] }}</option>
      {% endfor %}
    </select>
    <span class="pointer-events-none absolute inset-y-0 right-2 mt-1 flex items-center text-fg-muted">{{ m.icon('chevron-down', 'size-3.5') }}</span>
  </div>
  {% elif widget == 'relation' %}
  {% set chips = [] %}{% for pk, label in value or [] %}{% set _ = chips.append({"pk": pk, "label": label}) %}{% endfor %}
  {% set lookup_url = admin.url(request, '/' ~ view.identity ~ '/_lookup/' ~ field.name) %}
  <div class="combobox relative mt-1" x-data='combobox({{ field.name|tojson }}, {{ field.multiple|tojson }}, {{ chips|tojson }})' @click.outside="open = false">
    {% if field.multiple %}
    <div class="flex min-h-9 flex-wrap items-center gap-1 rounded-md border bg-surface px-2 py-1 focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-ring {{ 'border-danger' if error else 'border-input' }}">
      <template x-for="s in selected" :key="s.pk">
        <span class="inline-flex items-center gap-1 rounded-md bg-surface-2 px-2 py-0.5 text-sm">
          <span x-text="s.label"></span>
          <input type="hidden" :name="name" :value="s.pk">
          <button type="button" @click="remove(s.pk)" class="text-fg-muted hover:text-fg" aria-label="Remove">&times;</button>
        </span>
      </template>
      <input type="hidden" :name="name" value="" :disabled="selected.length > 0">
      <input id="f-{{ field.name }}" type="text" name="q" autocomplete="off" role="combobox" {% if error %}aria-invalid="true"{% endif %}
             x-model="query" @focus="open = true" :aria-expanded="open"
             hx-get="{{ lookup_url }}" hx-trigger="input changed delay:300ms, focus once" hx-target="next .combobox-options"
             placeholder="Search {{ field.target.__name__|lower }}…"
             class="min-w-32 flex-1 bg-transparent py-0.5 text-sm focus:outline-none">
    </div>
    {% else %}
    <div class="flex h-9 items-center gap-1 rounded-md border bg-surface pl-3 pr-2 focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-ring {{ 'border-danger' if error else 'border-input' }}">
      <span class="flex-1 truncate text-sm" x-show="!open && selected.length" x-cloak x-text="selected[0] && selected[0].label"></span>
      <input type="hidden" :name="name" :value="selected.length ? selected[0].pk : ''">
      <input id="f-{{ field.name }}" type="text" name="q" autocomplete="off" role="combobox" {% if error %}aria-invalid="true"{% endif %}
             x-show="open || !selected.length" x-model="query" @focus="open = true" :aria-expanded="open"
             hx-get="{{ lookup_url }}" hx-trigger="input changed delay:300ms, focus once" hx-target="next .combobox-options"
             placeholder="Search {{ field.target.__name__|lower }}…"
             class="min-w-0 flex-1 bg-transparent py-1.5 text-sm focus:outline-none">
      <button type="button" x-show="selected.length" x-cloak tabindex="-1" @click="remove(selected[0].pk)" class="text-fg-muted hover:text-fg" aria-label="Clear">{{ m.icon('x', 'size-3.5') }}</button>
      {{ m.icon('chevron-down', 'size-3.5 shrink-0 text-fg-muted') }}
    </div>
    {% endif %}
    <div class="combobox-options absolute z-10 mt-1 w-full" x-show="open" x-cloak></div>
  </div>
  {% elif widget in ('date', 'datetime-local', 'time') %}
  {% if widget == 'datetime-local' and value is not none and value is not string %}{% set value = value.isoformat(timespec='minutes') %}{% elif widget in ('date', 'time') and value is not none and value is not string %}{% set value = value.isoformat() %}{% endif %}
  {{ m.date_input(field.name, value, kind='datetime' if widget == 'datetime-local' else widget, id='f-' ~ field.name, required=field.required, error=error, readonly=field.readonly, class=control) }}
  {% else %}
  <input id="f-{{ field.name }}" type="{{ widget }}" name="{{ field.name }}" value="{{ value if value is not none else '' }}" {% if error %}aria-invalid="true"{% endif %} {{ 'readonly' if field.readonly }} {% if field.kind in ('float', 'decimal') %}step="any"{% endif %} class="{{ control }}">
  {% endif %}
  {% if field.help_text %}<p class="mt-1 text-xs text-fg-muted">{{ field.help_text }}</p>{% endif %}
  {% if error %}<p class="mt-1 flex items-center gap-1 text-xs text-danger">{{ m.icon('circle-x', 'size-3.5 shrink-0') }}{{ error }}</p>{% endif %}
</div>