{% extends "base.html.j2" %}

{% block content %}
    <div class="statistics">
        {% if data['statistics']['correct'] %}
            <p class="correct">✔ Correct: {{data['statistics']['correct']}}</p>
        {% endif %}
        {% if data['statistics']['incorrect'] %}
            <p class="incorrect">✖ Incorrect: {{data['statistics']['incorrect']}}</p>
        {% endif %}
    </div>
    {% for q_index in range(data['original_data']['size']) %}
        <div class="question-block">
            <p><strong>{{ data['original_data']["questions"][q_index]['question'] }}</strong></p>
            
            {% if data['is_answer_correct'][q_index] %}
                <p class="correct-answer">✔ Correct!</p>
                <p class="user-choice">You chose: {{ data['original_data']["questions"][q_index]['choices'][data['user_answers'][q_index]]['option'] }}</p>
                <p class="explanation">Why it is correct: {{ data['original_data']["questions"][q_index]['choices'][data['user_answers'][q_index]]['explanation'] }}</p>
            {% else %}
                <p class="incorrect-answer">✖ Incorrect!</p>
                <p class="user-choice">You chose: {{ data['original_data']["questions"][q_index]['choices'][data['user_answers'][q_index]]['option'] }}</p>
                <p class="explanation">Why incorrect: {{ data['original_data']["questions"][q_index]['choices'][data['user_answers'][q_index]]['explanation'] }}</p>

                {% for choice in data['original_data']["questions"][q_index]['choices'] %}
                    {% if choice['is_correct'] %}
                        <p class="correct-answer">✔ Correct answer: {{ choice['option'] }}</p>
                        <p class="explanation">Why it is correct: {{ choice['explanation'] }}</p>
                    {% endif %}
                {% endfor %}
            {% endif %}
        </div>
    {% endfor %}
{% endblock content %}
    