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

{{ block title }}
<b><u>Description of Advisor Payoffs</u></b>
{{ endblock }}

<!--Description Body-->
<p>If you are a Advisor, your payoffs will depend on the total number of Advisor’s in your group that invest (<i>Total Investors</i>) and on the quality level of the investment opportunity (<i>Quality</i>). </p>
<p>The payoff table below shows a Advisor’s payoffs for each possible combination of how many Investors in the group invest (<i>Total Investors</i>) and the <i>Quality</i> of the investment opportunity. </p>

<!--Payoff Table-->
<table class="playerpayofftable">
    <tr>
        <td style="width: 75px;"></td>
        <td class="header" colspan="6">Total Investors</td>
    </tr>
    <tr>
        <td  style="font-style: italic; width: 75px;">Quality</td>
        <td class="row1">0</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 pa_table.1 }}
        <td>{{ p }}</td>
        {{ endfor }}
    </tr>
    <tr>
        <td class="column1">Medium</td>
        {{ for p in pa_table.2 }}
        <td>{{ p }}</td>
        {{ endfor }}
    </tr>
    <tr>
        <td class="column1">High</td>
        {{ for p in pa_table.3 }}
        <td>{{ p }}</td>
        {{ endfor }}
    </tr>
</table>

<!-- Description Body Cont.-->
<p style="margin-top: 50px">Please look at an overhead screen as we go through some examples on how to read the <i>Investors’</i> payoff tables. </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 }}