{# Reusable question form fields. `q` = existing SurveyQuestion or None,
   `types` = allowed type list. Wrap in your own <form>. #}
{% set opts = q.options if q else {} %}
<div class="row g-2">
    <div class="col-md-3">
        <label class="form-label small">{{ _('Type') }}</label>
        <select name="type" class="form-select form-select-sm q-type">
            {% for t in types %}<option value="{{ t }}" {{ 'selected' if q and q.type == t else ('selected' if not q and t=='scale' else '') }}>{{ _(t) }}</option>{% endfor %}
        </select>
    </div>
    <div class="col-md-6">
        <label class="form-label small">{{ _('Section (optional)') }}</label>
        <input name="section" class="form-control form-control-sm" value="{{ q.section if q else '' }}" placeholder="{{ _('Group heading') }}">
    </div>
    <div class="col-md-3 d-flex align-items-end">
        <div class="form-check"><input class="form-check-input" type="checkbox" name="required" id="req{{ q.id if q else 'new' }}" {{ 'checked' if (q.required if q else True) else '' }}>
        <label class="form-check-label small" for="req{{ q.id if q else 'new' }}">{{ _('Required') }}</label></div>
    </div>
    <div class="col-12">
        <label class="form-label small">{{ _('Question') }} *</label>
        <input name="prompt" class="form-control form-control-sm" required value="{{ q.prompt if q else '' }}">
    </div>
    <div class="col-12">
        <label class="form-label small">{{ _('Help text (optional)') }}</label>
        <input name="help" class="form-control form-control-sm" value="{{ q.help if q else '' }}">
    </div>
    <div class="col-md-6 q-when-scale">
        <label class="form-label small">{{ _('Scale') }}</label>
        <div class="d-flex gap-1 align-items-center">
            <input name="min" type="number" class="form-control form-control-sm" style="width:5rem" value="{{ opts.get('min', 0) }}" placeholder="min">
            <span>–</span>
            <input name="max" type="number" class="form-control form-control-sm" style="width:5rem" value="{{ opts.get('max', 5) }}" placeholder="max">
            <input name="min_label" class="form-control form-control-sm" value="{{ opts.get('min_label','') }}" placeholder="{{ _('low label') }}">
            <input name="max_label" class="form-control form-control-sm" value="{{ opts.get('max_label','') }}" placeholder="{{ _('high label') }}">
        </div>
    </div>
    <div class="col-md-6 q-when-choices">
        <label class="form-label small">{{ _('Choices (one per line)') }}</label>
        <textarea name="choices" class="form-control form-control-sm" rows="3">{{ opts.get('choices', []) | join('\n') }}</textarea>
    </div>
</div>