{{ load static }}
{{ block content }}
<!--External CSS & js-->
<link rel="stylesheet" href="{{ static 'style_sheets/stage_2.css' }}" type="text/css">
<script src="{{ static 'java_scripts/stage_2.js' }}"></script>

{{ block title }}
<u><b>Stage 2 Decision 3 (Continued)</b></u>
{{ endblock }}

<!-- General Information Body -->
<p>Investors who choose to invest will earn 300 if the majority of Investors in their group (three or more) choose to invest <span style="color: red">and</span> the Quality is High. Unlike Decision 2, the payoff of a Investor depends on the quality of the investment.</p>

<!-- Investors Payoff Table -->
<table class="playerpayofftable">
    <tr>
        <td style="width: 75px;"></td>
        <td class="header" colspan="5">Total Investors (Including You)</td>
    </tr>
    <tr>
        <td style="font-style: italic; width: 75px;">Quality</td>
        <td class="row1">1</td>
        <td class="row1">2</td>
        <td class="row1">3</td>
        <td class="row1">4</td>
        <td class="row1">5</td>
    </tr>
    <tr>
        <td class="column1">Low</td>
        {{ for p in pb_table.1 }}
        <td>{{ p }}</td>
        {{ endfor }}
    </tr>
    <tr>
        <td class="column1">High</td>
        {{ for p in pb_table.3 }}
        <td>{{ p }}</td>
        {{ endfor }}
    </tr>
</table>

<!-- General Information Body Cont. -->
<p>As in Decision 1, any Investor who chooses not to invest will receive their outside option, which will be drawn at random.  Players will again use the slider to identify their minimum value of the outside option that will lead them to not invest.</p>

<!--Next Button: Only allows players to continue if all players in session are ready/clicked continue-->
<div class="button">
    <div>
        <p>Please click "Continue"</p>
        <p style="font-size: 16px;">*** Page will not continue until everyone has clicked continue ***</p>
    </div>
    <button type="button" id="validation" onclick="validating()">Continue</button>
</div>

<script>
// Checking if button has been clicked
window.onload = function () {
    const IsClicked = sessionStorage.getItem('IsClicked');

    if (IsClicked === 'true') {
        document.getElementById('validation').disabled = true;
    }
}

// Websocket to check if all players are ready
function liveRecv(data) {
    if (data === 'all_ready') {
        sessionStorage.setItem('IsClicked', 'false')
        document.forms[0].submit();
    }
}
</script>
{{ endblock }}