{% extends "global/Page.html" %}
{% load otree %}
{% block content %}
<h1>Final Results</h1>

<h2>Total Points: {{ total_points }}</h2>

<div>
    <h2>Feedback for Each Puzzle</h2>
    {% for feedback in feedback_all %}
        <h3>Puzzle {{ forloop.counter }}</h3>
        <div>
            {% for row in feedback %}
                <div style="display: flex;">
                    {% for cell in row %}
                        <div style="width: 40px; height: 40px; text-align: center; border: 1px solid black; background-color: {% if cell %}lightgreen{% else %}lightcoral{% endif %};">
                            {% if cell %}✔{% else %}✘{% endif %}
                        </div>
                    {% endfor %}
                </div>
            {% endfor %}
        </div>
    {% endfor %}
</div>

{% next_button %}
{% endblock %}