{% 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 colspan=2 rowspan=2></th>
            <th colspan=2>Other</th>
        </tr>
        <tr>
            <th style="text-align:center;color:red;width:35%;"> {{ Constants.action_labels.0 }}</th>
            <th style="text-align:center;color:red;width:35%;"> {{ Constants.action_labels.1 }}</th>
        </tr>
        <tr>
            <th rowspan=2><span class="rotate90">You</span></th>
            <th align ="center" style="color:blue;">{{ Constants.action_labels.0 }}</th>
            <td><span style="color:blue;">{{ player.P11 }}</span>, <span style="color:red;">{{ player.P11o }}</span></td>
            <td><span style="color:blue;">{{ player.P12 }}</span>, <span style="color:red;">{{ player.P21o }}</span></td>
        </tr>
        <tr>
            <th align = "center" style="color:blue;">{{ Constants.action_labels.1 }}</th>
            <td><span style="color:blue;">{{ player.P21 }}</span>, <span style="color:red;">{{ player.P12o }}</span></td>
            <td><span style="color:blue;">{{ player.P22 }}</span>, <span style="color:red;">{{ player.P22o }}</span></td>
        </tr>
    </table>
    <br>

</div>