{% extends "base_template.html" %}
{% block title %}{{ _('Responses') }} — {{ 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">{{ _('Responses to %(t)s', t=survey.title) }}</h1>
    <p class="text-muted mb-0">{{ ngettext('%(n)d response', '%(n)d responses', total, n=total) }}</p>
</div>
{% for r in results %}
<div class="card mb-3">
    <div class="card-body">
        <p class="fw-semibold mb-1">{{ loop.index }}. {{ r.question.prompt }}</p>
        <p class="text-muted small mb-2">{{ _(r.question.type) }} · {{ ngettext('%(n)d answer', '%(n)d answers', r.n, n=r.n) }}{% if r.average is defined and r.average is not none %} · {{ _('average') }} <strong>{{ r.average }}</strong>{% endif %}</p>
        {% if r.counts is defined %}
            {% set mx = (r.counts.values() | max) if r.counts else 0 %}
            <div class="survey-bars">
            {% for label, n in r.counts | dictsort %}
                <div class="d-flex align-items-center gap-2 mb-1">
                    <span class="text-nowrap" style="min-width:8rem">{{ label }}</span>
                    <div class="progress flex-grow-1" style="height:14px"><div class="progress-bar" style="width: {{ (100 * n / mx) if mx else 0 }}%"></div></div>
                    <span class="text-muted small">{{ n }}</span>
                </div>
            {% endfor %}
            </div>
        {% elif r.texts is defined %}
            {% if r.texts %}<ul class="small">{% for t in r.texts %}<li>{{ t }}</li>{% endfor %}</ul>
            {% else %}<p class="text-muted small mb-0">{{ _('No answers yet.') }}</p>{% endif %}
        {% endif %}
    </div>
</div>
{% else %}
<p class="text-muted">{{ _('This survey has no questions yet.') }}</p>
{% endfor %}
{% endblock %}