{% extends "base_template.html" %}
{% block title %}{{ _('Questions of %(t)s', t=survey.title) }}{% endblock %}
{% block content %}
<div class="d-flex flex-column align-items-start gap-2 mb-4">
    <a href="{{ url_for('survey.admin_index') }}" class="btn btn-outline-secondary btn-sm">← {{ _('All surveys') }}</a>
    <h1 class="h3 mb-0">{{ _('Questions of %(t)s', t=survey.title) }}</h1>
    <p class="text-muted mb-0">{{ _('Build the questionnaire. Preview it at') }} <a href="/survey/{{ survey.slug }}" target="_blank">/survey/{{ survey.slug }}</a>.</p>
</div>
{% with messages = get_flashed_messages(with_categories=true) %}{% for c, m in messages %}<div class="alert alert-{{ 'danger' if c=='danger' else 'success' }} py-2">{{ m }}</div>{% endfor %}{% endwith %}

<div class="card mb-4">
    <div class="card-header"><strong>{{ _('Add a question') }}</strong></div>
    <div class="card-body">
        <form method="POST" action="{{ url_for('survey.admin_question_add', survey_id=survey.id) }}" class="q-form">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            {% include "survey/admin/_qform.html" %}
            <div class="text-end mt-2"><button class="btn btn-primary btn-sm" type="submit">{{ _('Add question') }}</button></div>
        </form>
    </div>
</div>

{% for q in survey.questions %}
<div class="card mb-2">
    <div class="card-body">
        <div class="mb-2"><span class="badge bg-secondary">{{ loop.index }}. {{ _(q.type) }}</span></div>
        <form method="POST" action="{{ url_for('survey.admin_question_edit', question_id=q.id) }}" class="q-form" id="qform{{ q.id }}">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            {% with q=q %}{% include "survey/admin/_qform.html" %}{% endwith %}
        </form>
    </div>
    <div class="card-footer d-flex justify-content-between">
        <button class="btn btn-outline-primary btn-sm" type="submit" form="qform{{ q.id }}">{{ _('Save') }}</button>
        <form method="POST" action="{{ url_for('survey.admin_question_delete', question_id=q.id) }}" data-confirm="{{ _('Remove this question?') | striptags }}" onsubmit="return confirm(this.dataset.confirm)">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <button class="btn btn-outline-danger btn-sm" type="submit">{{ _('Remove') }}</button>
        </form>
    </div>
</div>
{% else %}
<p class="text-muted">{{ _('No questions yet. Add the first one above.') }}</p>
{% endfor %}
{% endblock %}

{% block scripts %}
<script>
(function () {
    function apply(form) {
        var sel = form.querySelector(".q-type"); if (!sel) return;
        var t = sel.value;
        var scale = form.querySelector(".q-when-scale");
        var choices = form.querySelector(".q-when-choices");
        if (scale) scale.style.display = (t === "scale") ? "" : "none";
        if (choices) choices.style.display = (t === "single" || t === "multiple") ? "" : "none";
    }
    document.querySelectorAll(".q-form").forEach(function (form) {
        apply(form);
        var sel = form.querySelector(".q-type");
        if (sel) sel.addEventListener("change", function () { apply(form); });
    });
})();
</script>
{% endblock %}