{% comment %}
Renders a single form field based on schema field data.

Context variables expected:
  field        — field dict from schema (name, label, field_type, is_required,
                 choices, help_text, default_value, prefill_from_user)
  group_users  — list of {id, name} dicts for user_picker fields
  user_groups  — from context processor; used for group_picker fields
  subform_slug — slug of the parent subform, used to namespace field names
{% endcomment %}
<div class="itr-field" id="field-{{ subform_slug }}__{{ field.name }}">

    {% if field.field_type != 'boolean' %}
    <label for="f_{{ subform_slug }}__{{ field.name }}">
        {{ field.label }}
        {% if field.is_required %}<span class="itr-required-mark" title="Required">*</span>{% endif %}
    </label>
    {% endif %}

    {# ── text ─────────────────────────────────────────────── #}
    {% if field.field_type == 'text' %}
    <input type="text" id="f_{{ subform_slug }}__{{ field.name }}" name="f_{{ subform_slug }}__{{ field.name }}"
           {% if field.is_required %}required{% endif %}
           value="{{ field.default_value|default:'' }}">

    {# ── textarea ─────────────────────────────────────────── #}
    {% elif field.field_type == 'textarea' %}
    <textarea id="f_{{ subform_slug }}__{{ field.name }}" name="f_{{ subform_slug }}__{{ field.name }}"
              rows="4"
              {% if field.is_required %}required{% endif %}>{{ field.default_value|default:'' }}</textarea>

    {# ── email ────────────────────────────────────────────── #}
    {% elif field.field_type == 'email' %}
    <input type="email" id="f_{{ subform_slug }}__{{ field.name }}" name="f_{{ subform_slug }}__{{ field.name }}"
           {% if field.is_required %}required{% endif %}
           value="{{ field.default_value|default:'' }}">

    {# ── phone ────────────────────────────────────────────── #}
    {% elif field.field_type == 'phone' %}
    <input type="tel" id="f_{{ subform_slug }}__{{ field.name }}" name="f_{{ subform_slug }}__{{ field.name }}"
           {% if field.is_required %}required{% endif %}
           value="{{ field.default_value|default:'' }}">

    {# ── integer ──────────────────────────────────────────── #}
    {% elif field.field_type == 'integer' %}
    <input type="number" id="f_{{ subform_slug }}__{{ field.name }}" name="f_{{ subform_slug }}__{{ field.name }}"
           step="1"
           {% if field.is_required %}required{% endif %}
           value="{{ field.default_value|default:'' }}">

    {# ── decimal ──────────────────────────────────────────── #}
    {% elif field.field_type == 'decimal' %}
    <input type="number" id="f_{{ subform_slug }}__{{ field.name }}" name="f_{{ subform_slug }}__{{ field.name }}"
           step="any"
           {% if field.is_required %}required{% endif %}
           value="{{ field.default_value|default:'' }}">

    {# ── date ─────────────────────────────────────────────── #}
    {% elif field.field_type == 'date' %}
    <input type="date" id="f_{{ subform_slug }}__{{ field.name }}" name="f_{{ subform_slug }}__{{ field.name }}"
           {% if field.is_required %}required{% endif %}
           value="{{ field.default_value|default:'' }}">

    {# ── datetime ─────────────────────────────────────────── #}
    {% elif field.field_type == 'datetime' %}
    <input type="datetime-local" id="f_{{ subform_slug }}__{{ field.name }}" name="f_{{ subform_slug }}__{{ field.name }}"
           {% if field.is_required %}required{% endif %}
           value="{{ field.default_value|default:'' }}">

    {# ── boolean ──────────────────────────────────────────── #}
    {% elif field.field_type == 'boolean' %}
    <label class="itr-field-boolean" for="f_{{ subform_slug }}__{{ field.name }}">
        {# Hidden input ensures 'false' is submitted when unchecked #}
        <input type="hidden" name="f_{{ subform_slug }}__{{ field.name }}" value="false">
        <input type="checkbox" id="f_{{ subform_slug }}__{{ field.name }}" name="f_{{ subform_slug }}__{{ field.name }}" value="true"
               {% if field.default_value %}checked{% endif %}>
        {{ field.label }}
        {% if field.is_required %}<span class="itr-required-mark">*</span>{% endif %}
    </label>

    {# ── select ───────────────────────────────────────────── #}
    {% elif field.field_type == 'select' %}
    <select id="f_{{ subform_slug }}__{{ field.name }}" name="f_{{ subform_slug }}__{{ field.name }}"
            {% if field.is_required %}required{% endif %}>
        <option value="">— Select —</option>
        {% for choice in field.choices %}
        <option value="{{ choice.value }}"
                {% if field.default_value == choice.value %}selected{% endif %}>
            {{ choice.label }}
        </option>
        {% endfor %}
    </select>

    {# ── multi_select ─────────────────────────────────────── #}
    {% elif field.field_type == 'multi_select' %}
    <select id="f_{{ subform_slug }}__{{ field.name }}" name="f_{{ subform_slug }}__{{ field.name }}" multiple
            {% if field.is_required %}required{% endif %}>
        {% for choice in field.choices %}
        <option value="{{ choice.value }}">{{ choice.label }}</option>
        {% endfor %}
    </select>
    <p class="itr-help">Hold Ctrl / Cmd to select multiple options.</p>

    {# ── radio ────────────────────────────────────────────── #}
    {% elif field.field_type == 'radio' %}
    <div class="itr-radio-group" role="radiogroup">
        {% for choice in field.choices %}
        <label class="itr-radio-option">
            <input type="radio" name="f_{{ subform_slug }}__{{ field.name }}" value="{{ choice.value }}"
                   {% if field.default_value == choice.value %}checked{% endif %}
                   {% if field.is_required %}required{% endif %}>
            {{ choice.label }}
        </label>
        {% endfor %}
    </div>

    {# ── user_picker ──────────────────────────────────────── #}
    {% elif field.field_type == 'user_picker' %}
    <select id="f_{{ subform_slug }}__{{ field.name }}" name="f_{{ subform_slug }}__{{ field.name }}"
            {% if field.is_required %}required{% endif %}>
        <option value="">— Select user —</option>
        {% for u in group_users %}
        <option value="{{ u.id }}">{{ u.name }}</option>
        {% endfor %}
    </select>

    {# ── group_picker ─────────────────────────────────────── #}
    {% elif field.field_type == 'group_picker' %}
    <select id="f_{{ subform_slug }}__{{ field.name }}" name="f_{{ subform_slug }}__{{ field.name }}"
            {% if field.is_required %}required{% endif %}>
        <option value="">— Select group —</option>
        {% for g in user_groups %}
        <option value="{{ g.id }}">{{ g.name }}</option>
        {% endfor %}
    </select>

    {# ── fallback ─────────────────────────────────────────── #}
    {% else %}
    <input type="text" id="f_{{ subform_slug }}__{{ field.name }}" name="f_{{ subform_slug }}__{{ field.name }}"
           {% if field.is_required %}required{% endif %}
           placeholder="{{ field.field_type }}">
    {% endif %}

    {% if field.help_text %}
    <p class="itr-help">{{ field.help_text }}</p>
    {% endif %}

</div>