{% load staticfiles otree %}

{% block content %}

<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="color:red;"> {{ Constants.action_labels.0 }}</td>
            <td style="color:blue;"> {{ Constants.action_labels.0 }}</td>
            <td style="color:red;"> 1 </td>
            <td style="color:blue;"> 2 </td>
        </tr>
        <tr>
            <td style="color:red;"> {{ Constants.action_labels.0 }}</td>
            <td style="color:blue;"> {{ Constants.action_labels.1 }}</td>
            <td style="color:red;"> 3 </td>
            <td style="color:blue;"> 4 </td>
        </tr>
        <tr>
            <td style="color:red;"> {{ Constants.action_labels.1 }}</td>
            <td style="color:blue;"> {{ Constants.action_labels.0 }}</td>
            <td style="color:red;"> 5 </td>
            <td style="color:blue;"> 6 </td>
        </tr>
        <tr>
            <td style="color:red;"> {{ Constants.action_labels.1 }}</td>
            <td style="color:blue;"> {{ Constants.action_labels.1 }}</td>
            <td style="color:red;"> 7 </td>
            <td style="color:blue;"> 8 </td>
        </tr>
    </table>
</div>

{% endblock %}