{% load otree staticfiles %}

<div class="instructions well well-lg">
    <link rel="stylesheet" type="text/css"
          href="{% static 'global/matrix.css' %}"/>
    <table class='table table-bordered text-center'
           style='width: auto; margin: auto'>
        <tr>
            <th>Your choice</th>
            <th>Other' choice</th>
            <th>Your payoff</th>
            <th>Other's payoff</th>
        </tr>
        <tr>
            <td style="text-align:center;color:red;"> {{ Constants.action_labels.0 }}</td>
            <td style="text-align:center;color:blue;"> {{ Constants.action_labels.0 }}</td>
            <td style="text-align:center;color:red;"> {{ player.P11 }}</td>
            <td style="text-align:center;color:blue;"> {{ player.P11o }}</td>
        </tr>
        <tr>
            <td style="text-align:center;color:red;"> {{ Constants.action_labels.0 }}</td>
            <td style="text-align:center;color:blue;"> {{ Constants.action_labels.1 }}</td>
            <td style="text-align:center;color:red;"> {{ player.P12 }}</td>
            <td style="text-align:center;color:blue;"> {{ player.P21o }}</td>
        </tr>
        <tr>
            <td style="text-align:center;color:red;"> {{ Constants.action_labels.1 }}</td>
            <td style="text-align:center;color:blue;"> {{ Constants.action_labels.0 }}</td>
            <td style="text-align:center;color:red;"> {{ player.P21 }}</td>
            <td style="text-align:center;color:blue;"> {{ player.P12o }}</td>
        </tr>
        <tr>
            <td style="text-align:center;color:red;"> {{ Constants.action_labels.1 }}</td>
            <td style="text-align:center;color:blue;"> {{ Constants.action_labels.1 }}</td>
            <td style="text-align:center;color:red;"> {{ player.P22 }}</td>
            <td style="text-align:center;color:blue;"> {{ player.P22o }}</td>
        </tr>
    </table>
    <br>
</div>