{% 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' %}
    <input type="text"
           id="field-{{ field.name }}"
           name="{{ field.name }}"
           class="form-input"
           value="{{ value }}"
           pattern="\d{4}-\d{2}-\d{2}"
           placeholder="YYYY-MM-DD"
           title="Date format: YYYY-MM-DD (e.g., 2024-03-15)"
           {% 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 %}
               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 %}
                title="Browse ontology">
            &#128269;
        </button>
    </div>

    {% elif field.type == 'list' %}
        {% if field['items'] and field['items'] not in ['string', 'int', 'float', 'bool'] %}
            {% 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 = 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 %}
        {% else %}
        <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>
        {% endif %}

    {% elif field.type == 'entity' %}
        {% 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('_', '-') }}">
            {% if value %}(1 item){% else %}(not set){% endif %}
        </button>
        {% else %}
        <span class="text-muted text-small">Create first, then add {{ field.name }}</span>
        {% endif %}

    {% 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>