{{ extends 'global/Page.html' }}
{{ block title }}Stage 2: Decide for Game 1 or Game 2{{ endblock }}

{{ block content }}

<h2>Round {{ CurrentRoundG2 }} of {{ C.GAMES_S2 }}</h2>
<br>

<p><strong>You are <span style="color: rgb(226, 80, 65);">Player 1</span>.</strong> You are matched with a randomly selected <span style="color: rgb(44, 130, 201);">Player 2</span>. There is a game miner who proposes you the following two games. <span style="color: rgb(44, 130, 201);">Player 2</span> will be informed about these two games you choose from. 
</p>
<p>Please choose one of the two games. <span style="color: rgb(44, 130, 201);">Player 2</span> will then be informed which of the two games you selected. In the next screen you will be playing the chosen game with <span style="color: rgb(44, 130, 201);">Player 2</span>. You will be choosing the row A or B while <span style="color: rgb(44, 130, 201);">Player 2</span> will choose either column C or D.
</p> 
<br>

<p><strong>Game 1</strong>. The game miner proposes to you: Pay me 3 and then play the following game:</p>

<div class="form-group required">
    <input type="radio" name="choiceG1orG2" value="1"><strong> Game 1</strong>
    <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(44, 130, 201);">Player 2</th>
        </tr>
        <tr>
            <th>Column C</th>
            <th>Column D</th>
        </tr>
        <tr>
            <th rowspan="2"><span style="color: rgb(226, 80, 65);">Player 1</span></th>
            <td><strong> Row A</strong></td>
            <td><span style="color: rgb(226, 80, 65);">{{payoffG1OG2_11}}</span>, <span style="color: rgb(44, 130, 201);">{{payoffG1OG2_12}}</span></td>
            <td><span style="color: rgb(226, 80, 65);">{{payoffG1OG2_13}}</span>, <span style="color: rgb(44, 130, 201);">{{payoffG1OG2_14}}</span></td>
        </tr>
        <tr>
            <td><strong> Row B</strong></td>
            <td><span style="color: rgb(226, 80, 65);">{{payoffG1OG2_15}}</span>, <span style="color: rgb(44, 130, 201);">{{payoffG1OG2_16}}</span></td>
            <td><span style="color: rgb(226, 80, 65);">{{payoffG1OG2_17}}</span>, <span style="color: rgb(44, 130, 201);">{{payoffG1OG2_18}}</span></td>
        </tr>
    </table>
</div>

<br>
<p><strong>Game 2</strong>. The game miner proposes to you: I pay you 2 if you play row A in the same game:</p>

<div class="form-group required">
        <input type="radio" name="choiceG1orG2" value="2"><strong> Game 2</strong>
    <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(44, 130, 201);">Player 2</span></th>
        </tr>
        <tr>
            <th>Column C</th>
            <th>Column D</th>
        </tr>
        <tr>
            <th rowspan="2"><span style="color: rgb(226, 80, 65);">Player 1</span></th>
            <td><strong> Row A</strong></td>
            <td><span style="color: rgb(226, 80, 65);">{{payoffG1OG2_21}}</span>, <span style="color: rgb(44, 130, 201);">{{payoffG1OG2_22}}</span></td>
            <td><span style="color: rgb(226, 80, 65);">{{payoffG1OG2_23}}</span>, <span style="color: rgb(44, 130, 201);">{{payoffG1OG2_24}}</span></td>
        </tr>
        <tr>
            <td><strong> Row B</strong></td>
            <td><span style="color: rgb(226, 80, 65);">{{payoffG1OG2_25}}</span>, <span style="color: rgb(44, 130, 201);">{{payoffG1OG2_26}}</span></td>
            <td><span style="color: rgb(226, 80, 65);">{{payoffG1OG2_27}}</span>, <span style="color: rgb(44, 130, 201);">{{payoffG1OG2_28}}</span></td>
        </tr>
    </table>
</div>

{{ next_button }}

{{ endblock }}