{% extends 'global/Page.html' %}
{% block title %}Performance Overview{% endblock %}
{% block content %}
<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }
    th, td {
        border: 1px solid black;
        padding: 5px;
        text-align: center;
        width: 2.5cm;
    }
</style>

<p>Control Group: {{ control_choice }}</p>

{% if is_principal %}
    <p>As the principal, you've set the threshold at {{ threshold }}%. {{ threshold }}% of your team player's responses will be checked.</p>
    <p>Your payoff is 3 points.</p>
{% else %}
    <p>Correct Responses: {{ correct_responses }}</p>
    <p>Wrong Responses: {{ wrong_responses }}</p>
    <p>Incomplete Responses: {{ incomplete_responses }}</p>
    <p>Initial Payoff: 5 points</p>
    <p>Your Final Reward: {{ payoff }}</p>
    {% if is_controlled %}
        <p>Note: As a participant in the {{ control_choice }} group, {{ checked_percentage }}% of your responses were checked for accuracy.</p>
        
        <h3>Checked Responses Details</h3>
        <table>
            <tr>
                <th>Response Number</th>
                <th>Math Task</th>
                <th>Your Answer</th>
                <th>Correct Answer</th>
                <th>Status</th>
                <th>Payoff</th>
            </tr>
            {% for row in table_data %}
                <tr>
                    <td>{{ row.response_number }}</td>
                    <td>{{ row.operation }}</td>
                    <td>{{ row.player_answer }}</td>
                    <td>{{ row.correct_answer }}</td>
                    <td>{{ row.status }}</td>
                    <td>
                        {% if row.status == 'Correct' %}
                            0
                        {% else %}
                            -0.2
                        {% endif %}
                    </td>
                </tr>
            {% endfor %}
        </table>
    {% endif %}
{% endif %}

{{ next_button }}
{% endblock %}