{{ extends 'global/Page.html' }}
{{ block title }}
Game {{ player.round_number }} of {{ C.NUM_ROUNDS }}
{{ endblock }}

{{ block content }}

<p>You are <strong><span style="color:red;">player 1</span></strong>. You choose <strong><span style="color:red;">option A</span></strong> or <strong><span style="color:red;">option B</span></strong>. Your payoffs are the red numbers. <strong>Player 2</strong> chooses <strong>option C</strong> or <strong>option D</strong>.</p>
<br>

<div class="form-group required">
    <table class="table table-bordered text-center" style="width: auto; margin: auto">
        <tr>
            <th colspan="2" rowspan="2"></th>
            <th colspan="2"><strong>Player 2</strong></th>
        </tr>
        <tr>
            <th><strong>Option C</strong></th>
            <th><strong>Option D</strong></th>
        </tr>
        <tr>
            <th rowspan="2"><span><strong><span style="color:red;">Player 1</span></strong></th>
            <td><input type="radio" name="choice" value="1"> <strong><span style="color:red;">Option A</span></strong></td>
            <td><strong><span style="color:red;">{{pos1}}</span></strong>, <strong>{{pos2}}</strong></td>
            <td><strong><span style="color:red;">{{pos3}}</span></strong>, <strong>{{pos4}}</strong></td>
        </tr>
        <tr>
            <td><input type="radio" name="choice" value="2"> <strong><span style="color:red;">Option B</span></strong></td>
            <td><strong><span style="color:red;">{{pos5}}</span></strong>, <strong>{{pos6}}</strong></td>
            <td><strong><span style="color:red;">{{pos7}}</span></strong>, <strong>{{pos8}}</strong></td>
        </tr>
    </table>
</div>

{{ next_button }}

{{ endblock }}