{{ block title }}
Practice Round #{{ round }} out of 2
{{ endblock }}

{{ block content }}
<br>
<p>
In this scenario:
</p>
<div class="card" style="background-color: #e6e6e6">
    <div class="card-body">
		{{ if reason == 0 }}
        <p>
        Both Agents participated in letter-to-numbers conversions.    
        </p>    
        <p>
        Agent A has <b>?</b> correct answers.
        <br>
        Agent B has <b>?</b> correct answers.
        </p>
    {{ elif reason == 1 }}
        <p>
        Both Agents participated in the lottery.    
        </p>
        <p>
        Agent A has the lottery number <b>?</b>.
        <br>
        Agent B has the lottery number <b>?</b>.
        </p>
    {{ endif }}
        <p>
        Agent A starts with <b>?</b> USD.
        <br>
        Agent B starts with <b>?</b> USD.
        </p>
    </div>
</div>
<br>

<div class="d-flex flex-column align-items-center">    
<h5>How would you split the 6 USD bonus?</h5>
<table>
    <tr class="title-row-upper">
        <td class='column1'></td>
        <td class='column2title'><img src="https://i.imgur.com/xehibP6.jpg" width="100"/></td>
        <td class='column3title'><img src="https://i.imgur.com/QYo5uBb.jpg" width="100"/></td>
        <td class='column4title'></td>
        <td class='column1'></td>
    </tr>
    <tr>
        <td class='column1'></td>
        <td class='column2title'><b>Agent {{ agent0 }}</b></td>
        <td class='column3title'><b>Agent {{ agent1 }}</b></td>
        <td class='column4title'></td>  
        <td class='column1'></td>        
    </tr>
    <tr class="title-row-lower">
        <td class='column1'></td>
        {{ if reason == 0 }}
        <td class="column2"><b>?</b> correct answers</td>
        <td class="column3"><b>?</b> correct answers</td>
        {{ elif reason == 1 }}
        <td class="column2">Lottery number <b>?</b></td>
        <td class="column3">Lottery number <b>?</b></td>
        {{ endif }}
        <td class="column4"></td>
        <td class='column1'></td>
    </tr>
    <tr class="gray-row">
        <td colspan="5">&nbsp;</td>
    </tr>
    <tr class="bottom-row">
        <td class='column1' style="text-align: right; color: red; font-weight: bold;">YOU WILL WRITE HERE &DoubleRightArrow;</td>
        <td class='column2'><input name='game_alloc0' id=agenta class="short-input" type="number" min="0" max="6" step="1" placeholder="Starts with ?" readonly></td>
        <td class='column3'><input name='game_alloc1' id=agentb class="short-input" type="number" min="0" max="6" step="1" placeholder="Starts with ?" readonly></td>
        <td class='column4'><b>Total: ?</b> USD</td>
        <td class='column1' style="text-align: left; color: red; font-weight: bold;">&DoubleLeftArrow; YOU WILL SEE THE SUM HERE</td>
    </tr>
    <tr>
        <td style="height: 25px">
        </td>
    </tr>
    <tr>
        <td> </td>
    </tr>
    <tr>
        <td colspan="3"></td>
        <td style="text-align: center"><button id='next' class="otree-btn-next btn btn-dark btn-primary"><span id='time'>Decide</span></button></td>
        <td class='column1' style="text-align: left; color: red; font-weight: bold;">&DoubleLeftArrow; YOU WILL NEED TO WAIT AT LEAST 20 SECONDS</td>
    </tr>
</table>
</div>

{{ include C.spectator_instructions }}

{{ endblock }}

{{ block style }}
    <link rel="stylesheet" href="{% static 'global/style.css' %}"/>

    <style>
        /*Table*/
        table {margin: 0 auto}
        td {vertical-align: middle;}
        .column1 {width: 400px;}
        .column2 {width: 200px; text-align: center}
        .column2title {width: 200px; text-align: center}
        .column3 {width: 200px; text-align: center}
        .column3title {width: 200px; text-align: center}
        .column4title {width: 150px;}
        .title-row-upper td { padding-top: 10px }
        .title-row-upper .column2title, .title-row-upper .column3title, .title-row-upper .column4title { border-top: 2px solid black; }
        .title-row-lower td { padding-bottom: 10px }
        .title-row-lower .column2, .title-row-lower .column3, .title-row-lower .column4 { border-bottom: 2px solid black; }
        .bottom-row td { padding-bottom: 10px; text-align: center}
        .bottom-row .column2, .bottom-row .column3, .bottom-row .column4 { border-bottom: 2px solid black; }
        tr.gray-row {color: gray; font-size: 5px}
        
        /*Input*/
        .short-input {
            width: 100px; 
            text-align: center; 
            padding: 5px; 
        }
        /*https://www.accountingexperiments.com/post/sliders/*/    
        /*Button*/
        .btn {width: 150px;}
    </style>
{{ endblock }}