{{ extends 'global/Page.html' }}
{{ block title }}Decide for each Game1 and Game2.{{ endblock }}

{{ block content }}

<p><strong>You are <span style="color: rgb(44, 130, 201);">Player 2</span>.</strong> Please, decide for each game.</p> 
<p>You can make your decision by choosing row A or row B.</p>

<div class="form-group required">
    <h2>Game 1</h2>
    <table class="table table-bordered text-center" style="width: auto; margin: auto">
        <tr>
            <th colspan="2" rowspan="2"></th>
            <th colspan="2"><span style="color: rgb(226, 80, 65);">Player 1</span></th>
        </tr>
        <tr>
            <th>Column C</th>
            <th>Column D</th>
        </tr>
        <tr>
            <th rowspan="2"><span style="color: rgb(44, 130, 201);">Player 2</span></th>
            <td><input type="radio" name="choiceG1ANDG2_A" value="1"><strong> Row A</strong></td>
            <td><span style="color: rgb(44, 130, 201);">{{payoffG1G2_11}}</span>, <span style="color: rgb(226, 80, 65);">{{payoffG1G2_12}}</span></td>
            <td><span style="color: rgb(44, 130, 201);">{{payoffG1G2_13}}</span>, <span style="color: rgb(226, 80, 65);">{{payoffG1G2_14}}</span></td>
        </tr>
        <tr>
            <td><input type="radio" name="choiceG1ANDG2_A" value="2"><strong> Row B</strong></td>
            <td><span style="color: rgb(44, 130, 201);">{{payoffG1G2_15}}</span>, <span style="color: rgb(226, 80, 65);">{{payoffG1G2_16}}</span></td>
            <td><span style="color: rgb(44, 130, 201);">{{payoffG1G2_17}}</span>, <span style="color: rgb(226, 80, 65);">{{payoffG1G2_18}}</span></td>
        </tr>
    </table>
</div>

<div class="form-group required">
    <h2>Game 2</h2>
    <table class="table table-bordered text-center" style="width: auto; margin: auto">
        <tr>
            <th colspan="2" rowspan="2"></th>
            <th colspan="2"><span style="color: rgb(226, 80, 65);">Player 1</span></th>
        </tr>
        <tr>
            <th>Column C</th>
            <th>Column D</th>
        </tr>
        <tr>
            <th rowspan="2"><span style="color: rgb(44, 130, 201);">Player 2</span></th>
            <td><input type="radio" name="choiceG1ANDG2_B" value="1"><strong> Row A</strong></td>
            <td><span style="color: rgb(44, 130, 201);">{{payoffG1G2_21}}</span>, <span style="color: rgb(226, 80, 65);">{{payoffG1G2_22}}</span></td>
            <td><span style="color: rgb(44, 130, 201);">{{payoffG1G2_23}}</span>, <span style="color: rgb(226, 80, 65);">{{payoffG1G2_24}}</span></td>
        </tr>
        <tr>
            <td><input type="radio" name="choiceG1ANDG2_B" value="2"><strong> Row B</strong></td>
            <td><span style="color: rgb(44, 130, 201);">{{payoffG1G2_25}}</span>, <span style="color: rgb(226, 80, 65);">{{payoffG1G2_26}}</span></td>
            <td><span style="color: rgb(44, 130, 201);">{{payoffG1G2_27}}</span>, <span style="color: rgb(226, 80, 65);">{{payoffG1G2_28}}</span></td>
        </tr>
    </table>
</div>

{{ next_button }}

{{ endblock }}