{% set field_error = field_errors.get(field.name) if field_errors is defined and field_errors else None %}
<div class="form-group{% if field_error %} has-error{% endif %}">
    <label class="form-label" for="field-{{ field.name }}">
        {{ field.name }}
        {% if field.required %}<span class="required">*</span>{% endif %}
        {% if auto_fields and field.name in auto_fields %}<span class="auto-field">(auto)</span>{% endif %}
    </label>

    {% set value = values.get(field.name, '') %}
    {% set is_auto = auto_fields and field.name in auto_fields %}

    {% if field.type == 'string' %}
    <input type="text"
           id="field-{{ field.name }}"
           name="{{ field.name }}"
           class="form-input{% if is_auto %} form-input-readonly{% endif %}"
           value="{{ value }}"
           {% if is_auto %}readonly{% endif %}
           {% if field.required %}required{% endif %}
           data-testid="input-{{ field.name|replace('_', '-') }}">

    {% elif field.type == 'integer' %}
    <input type="number"
           id="field-{{ field.name }}"
           name="{{ field.name }}"
           class="form-input"
           value="{{ value }}"
           step="1"
           {% if field.required %}required{% endif %}
           data-testid="input-{{ field.name|replace('_', '-') }}">

    {% elif field.type == 'float' %}
    <input type="number"
           id="field-{{ field.name }}"
           name="{{ field.name }}"
           class="form-input"
           value="{{ value }}"
           step="any"
           {% if field.required %}required{% endif %}
           data-testid="input-{{ field.name|replace('_', '-') }}">

    {% elif field.type == 'boolean' %}
    <div class="form-checkbox">
        <input type="checkbox"
               id="field-{{ field.name }}"
               name="{{ field.name }}"
               value="true"
               {% if value %}checked{% endif %}
               data-testid="input-{{ field.name|replace('_', '-') }}">
        <label for="field-{{ field.name }}">{{ field.name }}</label>
    </div>

    {% elif field.type == 'date' %}
    {# The browser's own date control: a text box with a regex told the reader
       the format only after they had got it wrong. #}
    <input type="date"
           id="field-{{ field.name }}"
           name="{{ field.name }}"
           class="form-input"
           value="{{ value|string|replace(' ', 'T')|truncate(10, true, '') }}"
           {% if field.required %}required{% endif %}
           data-testid="input-{{ field.name|replace('_', '-') }}">

    {% elif field.type == 'datetime' %}
    {# datetime had no branch at all and fell through to a plain text box, so a
       spec's datetime field was typed by hand. datetime-local wants
       YYYY-MM-DDTHH:MM while a stored value reads "2025-01-15 09:00:00+00:00":
       take the date and the hour and minute, which is what the control holds. #}
    <input type="datetime-local"
           id="field-{{ field.name }}"
           name="{{ field.name }}"
           class="form-input"
           value="{{ value|string|replace(' ', 'T')|truncate(16, true, '') }}"
           {% if field.required %}required{% endif %}
           data-testid="input-{{ field.name|replace('_', '-') }}">

    {% elif field.type == 'uri' %}
    <input type="url"
           id="field-{{ field.name }}"
           name="{{ field.name }}"
           class="form-input"
           value="{{ value }}"
           {% if field.required %}required{% endif %}
           data-testid="input-{{ field.name|replace('_', '-') }}">

    {% elif field.type == 'ontology_term' %}
    <div class="input-with-lookup">
        <input type="text"
               id="field-{{ field.name }}"
               name="{{ field.name }}"
               class="form-input lookup-input"
               value="{{ value }}"
               data-lookup-type="ontology"
               {% if field.ontologies %}data-ontologies="{{ field.ontologies|join(',') }}"{% endif %}
               {% if field.within %}data-within="{{ field.within }}"{% endif %}
               autocomplete="off"
               placeholder="Search ontology terms..."
               {% if field.required %}required{% endif %}
               data-testid="input-{{ field.name|replace('_', '-') }}">
        <button type="button"
                class="ontology-lookup-btn"
                data-input="input-{{ field.name|replace('_', '-') }}"
                {% if field.ontologies %}data-ontologies="{{ field.ontologies|join(',') }}"{% endif %}
               {% if field.within %}data-within="{{ field.within }}"{% endif %}
                title="Browse ontology">
            &#128269;
        </button>
    </div>

    {% elif field.nested %}
        {# A field holding entities, a list or a single one, has one rendering
           (ADR 006). An edit form shows it as its table under Related
           Entities; this button is the fallback when no table was built. #}
        {% if is_edit %}
        <button type="button"
                class="btn nested-field-btn"
                hx-get="/table/{{ entity_type }}/{{ field.name }}"
                hx-target="#main"
                hx-swap="innerHTML"
                data-testid="btn-nested-{{ field.name|replace('_', '-') }}">
            {% set count = (1 if value is mapping or value is string else value|length) if value else 0 %}
            {{ field.name }} ({{ count }})
        </button>
        {% else %}
        <span class="text-muted text-small">Create first, then add {{ field.name }}</span>
        {% endif %}

    {% elif field.type == 'list' %}
        <textarea id="field-{{ field.name }}"
                  name="{{ field.name }}"
                  class="form-input form-textarea"
                  placeholder="One item per line"
                  {% if field.required %}required{% endif %}
                  data-testid="input-{{ field.name|replace('_', '-') }}">{% if value is iterable and value is not string %}{{ value|join('\n') }}{% else %}{{ value }}{% endif %}</textarea>

    {% else %}
    <input type="text"
           id="field-{{ field.name }}"
           name="{{ field.name }}"
           class="form-input"
           value="{{ value }}"
           {% if field.required %}required{% endif %}
           data-testid="input-{{ field.name|replace('_', '-') }}">
    {% endif %}

    {% if field_error %}
    <p class="form-error" data-testid="field-error-{{ field.name|replace('_', '-') }}">{{ field_error }}</p>
    {% endif %}
    {% if field.description %}
    <p class="form-help">{{ field.description }}</p>
    {% endif %}
</div>