{# Positive deps render collapsed and are expanded by JS on load; negated deps
   ("!field") render open, since their common state is visible — otherwise every
   such field would animate open on every page load. #}
<div class="mb-3"{% if field.get('depends_on') %} data-depends-on="{{ field.depends_on }}"{% if not field.depends_on.startswith('!') %} style="max-height:0;opacity:0;overflow:hidden;margin:0!important;padding:0;transition:max-height .3s ease,opacity .3s ease,margin .3s ease"{% endif %}{% endif %}>
    {% if field.type == 'checkbox' %}
    <div class="form-check form-switch">
        <input type="checkbox" name="{{ field.key }}" id="{{ field.key }}"
               class="form-check-input" role="switch"
               value="true"
               {% if field.get('autofill') %}data-autofill='{{ field.autofill | tojson }}'{% endif %}
               {% if field.get('exclusive_with') %}data-exclusive-with='{{ field.exclusive_with | tojson }}'{% endif %}
               {% if field.value %}checked{% endif %}>
        <label for="{{ field.key }}" class="form-check-label">
            {{ field.label }}
            {% if field.get('description') %}<i class="bi bi-info-circle text-muted ms-1" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ field.description }}"></i>{% endif %}
        </label>
    </div>

    {% elif field.type == 'ajax_select' %}
    <label for="{{ field.key }}" class="form-label">
        {{ field.label }}
        {% if field.required %}<span class="text-danger">*</span>{% endif %}
        {% if field.get('description') %}<i class="bi bi-info-circle text-muted ms-1" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ field.description }}"></i>{% endif %}
    </label>
    <select name="{{ field.key }}" id="{{ field.key }}"
            class="form-select"
            data-ajax-url="{{ field.ajax_url }}"
            data-placeholder="{{ field.get('placeholder', 'Type to search...') }}"
            {% if field.required %}required{% endif %}>
        {% if field.value %}
        <option value="{{ field.value }}" selected>{{ field.get('value_label', field.value) }}</option>
        {% endif %}
    </select>

    {% elif field.type == 'select' %}
    <label for="{{ field.key }}" class="form-label">
        {{ field.label }}
        {% if field.required %}<span class="text-danger">*</span>{% endif %}
        {% if field.get('description') %}<i class="bi bi-info-circle text-muted ms-1" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ field.description }}"></i>{% endif %}
    </label>
    <select name="{{ field.key }}" id="{{ field.key }}"
            class="form-select"
            {% if field.required %}required{% endif %}
            {% if field.get('hx_get') %}
            hx-get="{{ field.hx_get }}"
            hx-trigger="{{ field.get('hx_trigger', 'change') }}"
            hx-target="{{ field.get('hx_target', '') }}"
            hx-swap="{{ field.get('hx_swap', 'innerHTML') }}"
            {% if field.get('hx_trigger', 'change') != 'load' %}hx-include="this"{% endif %}
            {% endif %}>
        <option value="">-- Select --</option>
        {% if field.choices %}
        {% for val, label in field.choices %}
        <option value="{{ val }}" {% if field.value is not none and field.value|string == val|string %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
        {% endif %}
    </select>

    {% elif field.type == 'textarea' %}
    <label for="{{ field.key }}" class="form-label">
        {{ field.label }}
        {% if field.required %}<span class="text-danger">*</span>{% endif %}
        {% if field.get('description') %}<i class="bi bi-info-circle text-muted ms-1" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ field.description }}"></i>{% endif %}
    </label>
    <textarea name="{{ field.key }}" id="{{ field.key }}"
              class="form-control" rows="3"
              {% if field.required %}required{% endif %}>{{ field.value or '' }}</textarea>

    {% elif field.type == 'file' %}
    <label for="{{ field.key }}" class="form-label">
        {{ field.label }}
        {% if field.required and not field.value %}<span class="text-danger">*</span>{% endif %}
        {% if field.get('description') %}<i class="bi bi-info-circle text-muted ms-1" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ field.description }}"></i>{% endif %}
    </label>
    <input type="file" name="{{ field.key }}" id="{{ field.key }}"
           class="form-control"
           {% if field.get('allowed_extensions') %}accept="{% for e in field.allowed_extensions %}.{{ e }}{% if not loop.last %},{% endif %}{% endfor %}"{% endif %}
           {% if field.required and not field.value %}required{% endif %}>
    {% if field.value %}<div class="form-text">Current: <code>{{ field.value }}</code> — choose a file to replace it.</div>{% endif %}

    {% else %}
    <label for="{{ field.key }}" class="form-label">
        {{ field.label }}
        {% if field.required %}<span class="text-danger">*</span>{% endif %}
        {% if field.get('description') %}<i class="bi bi-info-circle text-muted ms-1" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ field.description }}"></i>{% endif %}
    </label>
    <input type="{{ field.type }}" name="{{ field.key }}" id="{{ field.key }}"
           class="form-control"
           value="{{ field.value if field.value is not none else '' }}"
           {% if field.required %}required{% endif %}
           {% if field.get('placeholder') %}placeholder="{{ field.placeholder }}"{% endif %}>
    {% endif %}
</div>