{% extends exam.app_name|add:'/exams.html' %}

{% block content %}
  <div class="container my-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
      <h2>Review overview: {{ exam.name }}</h2>
      <div>
        <a class="btn btn-primary" href="{% url app_name|add:':exam_review_question' exam.pk 0 %}">Start sequential review</a>
      </div>
    </div>

    <p class="text-muted small">Colour indicates question results (for exam): green (good), yellow (check), red (needs attention). Hover for details.</p>

    <div class="row">
      {% for qs in question_summaries %}
        <div class="col-md-6 mb-3">
          <div class="card border-{{ qs.colour }} h-100">
            <div class="card-body">
              <div class="d-flex justify-content-between">
                <h5 class="card-title">Question {{ qs.q_index|add:1 }}: {{ qs.question |safe }}</h5>
                <span class="badge bg-{{ qs.colour }} align-self-start">{% if qs.correct_pct is not None %}{{ qs.correct_pct }}% correct{% elif qs.answered_pct is not None %}{{ qs.answered_pct }}% answered{% else %}No data{% endif %}</span>
              </div>

              <p class="card-text small text-muted mb-2">Responses: {{ qs.total_responses }}{% if qs.top_answer %} — top: "{{ qs.top_answer }}"{% endif %}</p>
              {% if qs.correct_answer %}
                <p class="card-text small mb-2"><strong>Correct:</strong> <span class="text-success">{{ qs.correct_answer|safe }}</span></p>
              {% endif %}

              <div class="d-flex gap-2">
                <a class="btn btn-sm btn-outline-primary" href="{% url app_name|add:':exam_review_question' exam.pk qs.q_index %}">Review</a>
                <a class="btn btn-sm btn-outline-secondary" href="#" onclick="document.location.href='{% url app_name|add:':question_detail' qs.question.pk %}';return false;">Question detail</a>
              </div>

              <details class="mt-2">
                <summary class="small">Answer breakdown</summary>
                <ul class="list-unstyled small mt-2">
                  {% if qs.breakdown %}
                    {% for ans in qs.breakdown %}
                      <li>{{ ans.0 }}: {{ ans.1 }} ({{ ans.2 }}%)</li>
                    {% endfor %}
                  {% else %}
                    <li class="text-muted">No responses yet</li>
                  {% endif %}
                </ul>
              </details>
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>

{% endblock %}