{{ block title }}
Additional Scenario #{{ round }} out of 6
{{ 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>more correct answers</b>.
        <br>
        Agent B has <b>fewer correct answers</b>.
        </p>
    {{ elif reason == 1 }}
        <p>
        Both Agents participated in the lottery.    
        </p>
        <p>
        Agent A has the <b>higher lottery number</b>.
        <br>
        Agent B has the <b>lower lottery number</b>.
        </p>
    {{ endif }}
    {{ if statusquo == 0 }}
        <p>
        Agent A starts with <b>6 USD</b>.
        <br>
        Agent B starts with <b>0 USD</b>.
        </p>
    {{ elif statusquo == 6 }}
        <p>
        Agent A starts with <b>0 USD</b>.
        <br>
        Agent B starts with <b>6 USD</b>.
        </p>
    {{ endif }}
    </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='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>
    </tr>
    <tr>
        <td class='column2title'><b>Agent {{ agent0 }}</b></td>
        <td class='column3title'><b>Agent {{ agent1 }}</b></td>
        <td></td>   
    </tr>
    <tr class="title-row-lower">
        {{ if reason == 0 }}
        <td class="column2">More correct answers</td>
        <td class="column3">Fewer correct answers</td>
        {{ elif reason == 1 }}
        <td class="column2">Higher lottery number</td>
        <td class="column3">Lower lottery number</td>
        {{ endif }}
        <td></td>
    </tr>
    <tr class="gray-row">
        <td colspan="3">&nbsp;</td>
    </tr>
    <tr class="bottom-row">
        {{ if statusquo == 0 }}
        <td><input name='game_alloc0' id=agenta class="short-input" type="number" min="0" max="6" step=".01" placeholder="Starts with 6"></td>
        <td><input name='game_alloc1' id=agentb class="short-input" type="number" min="0" max="6" step=".01" placeholder="Starts with 0""></td>
        {{ elif statusquo == 6 }}
        <td><input name='game_alloc0' id=agenta class="short-input" type="number" min="0" max="6" step=".01" placeholder="Starts with 0"></td>
        <td><input name='game_alloc1' id=agentb class="short-input" type="number" min="0" max="6" step=".01" placeholder="Starts with 6"></td>
        {{ elif statusquo == 99 }}
        <td><input name='game_alloc0' id=agenta class="short-input" type="number" min="0" max="6" step=".01"></td>
        <td><input name='game_alloc1' id=agentb class="short-input" type="number" min="0" max="6" step=".01"></td>
        {{ endif }}
        <td><b>Total: </b><span id="sum" class="invalid">0</span> USD</td>
    </tr>
    <tr>
        <td> </td>
    </tr>
</table>
<br>
</div>
<div class="card">
    <div class=card-header><b>How would you split the 6 USD bonus?</b></div>
    <div class="card-body">
        <div {{ if 'rule' in form.errors }} class="border border-danger px-3 rounded" {{ endif }}>
        {{ formfield 'rule' label=''}}
        </div>
    </div>
</div>
<br>
<button id='next' class="otree-btn-next btn btn-dark btn-primary"><span id='time'>Decide</span></button>
<br>
<br>

{{ 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: 200px;}
        .column2 {width: 200px; text-align: center}
        .column2title {width: 200px; text-align: center}
        .column3 {width: 200px; text-align: center}
        .column4title {width: 150px;}
        .column3title {width: 200px; text-align: center}
        .title-row-upper td {border-top: 2px solid black; padding-top: 10px}
        .title-row-lower td {border-bottom: 2px solid black; padding-bottom: 10px}
        .bottom-row td {border-bottom: 2px solid black; padding-bottom: 10px; text-align: center}
        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;}

        #sum {
        font-weight: bold;
        }
        .valid {
        color: green;
        }
        .invalid {
        color: red;
        }
    </style>
{{ endblock }}

{{ block scripts }}
    <script>
        // Rule
        const rule = document.getElementsByName('rule');
        const statusQuo = {{ statusquo }};

        // Sum
        const inputs = [
            document.getElementById('agenta'),
            document.getElementById('agentb'),
        ];
        inputs.forEach(input => {
            input.readOnly = true;
        });
        const sumDisplay = document.getElementById('sum');
        
        // Functions
        function updateSum() {
            const sum = inputs.reduce((acc, input) => acc + Number(input.value), 0);
            sumDisplay.textContent = sum;
            sumDisplay.className = (sum === 6) ? 'valid' : 'invalid';
            next.disabled = (sum === 6) ? false : true;
            next.style.backgroundColor = (sum === 6) ? '#000000' : '#969696';
        }

        rule.forEach(radio => {
            radio.addEventListener('change', function() {
                if (this.value === '0' && statusQuo !== 99) {
                    inputs[0].value = 6 - statusQuo;
                    inputs[1].value = statusQuo;
                    updateSum();
                }
                if (this.value === '0' && statusQuo == 99) {
                    inputs[0].value = '';
                    inputs[1].value = '';
                    updateSum();
                }
                if (this.value === '1') {
                    inputs[0].value = 3;
                    inputs[1].value = 3;
                    updateSum();
                }
                if (this.value === '2') {
                    inputs[0].value = 6;
                    inputs[1].value = 0;
                    updateSum();
                }
            });
        });

        inputs.forEach(input => input.addEventListener('input', updateSum));

        function updateButton() {
            const sum = inputs.reduce((acc, input) => acc + Number(input.value), 0);
            next.style.color = 'white';
            next.disabled = (sum === 6) ? false : true;
            next.style.backgroundColor = (sum === 6) ? '#000000' : '#969696';
        }
    </script>
{{ endblock }}