{{ block content }}
    Below you find the payoff Matrix of a priosners Dilemma.
    <table>
        <tr>
            <td rowspan = "4"> Other Player </td>
            <td colspan = "3"> You </td>
        </tr>
        <tr>
            <td></td>
            <td style="...">Cooperate</td>
            <td style="...">Defect </td>            
        </tr>
        <tr>
            <td>Cooperate</td>
            <td>{{ Constants.payoff_both_cooperate }} , {{Constants.payoff_both_cooperate }}</td>
            <td>{{ Constants.payoff_cooperate_defect_low}} , {{ Constants.payoff_cooperate_defect_high }}</td>
        </tr>
        <tr>
            <td>Defect</td>
            <td>{{ Constants.payoff_cooperate_defect_high }} , {{ Constants.payoff_cooperate_defect_low }}</td>
            <td>{{ Constants.payoff_both_defect }} , {{ Constants.payoff_both_defect}}</td>
        </tr>
    </table>

    {{ formfields }}
    {{ next_button }}

{{ endblock }}

{% block app_styles %}
    <style>
        table {
            border: 1px solid black;
        }

        td {
            border: 1px solid white;
            background-color: rgb(0, 33, 71);
            color: white;
            font-weight: bold;
            font-size: 19px;
            padding: 3px 10px 3px 10px;
            text-align: center;
        }

    </style>
{% endblock %}