{{ 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>

<!-- Title -->
{{ block title }}
<div style="margin-bottom: 10px; margin-top: 10px; text-align: center; contain: content">
    <h3 style="float: left"><u>Slider Training:</u> Feedback</h3>
    <h3 style="float: right">Round {{ player.round_number }}</h3>
</div>
{{ endblock }}

<!-- Invest Value and your selection info. -->
<div class="draws">
    <h3 style="float: left"><u>Invest Value:</u> {{ invest_value }}</h3>
    <h3 style="float: right"><u>Your Minimum Outside Option:</u> {{ player.pb_outside_option }}</h3>
</div>

<!-- Result of minimum choice -->
<p class="draws"><u>Note:</u> You did worse setting your minimum <b>{{ choice }}</b> the invest value [<b>{{ worse }}</b>] times and did better [<b>0</b>] times</p>

<!-- Table of draws -->
<table class="draws_table">
    <tr>
        <th>Draw:</th>
        <th>Outside Option:</th>
        <th>Your Payoff:</th>
        <th>Alternate Payoff:</th>
        <th>Payoff Difference:</th>
    </tr>
    {{ for key, values in draw_dict.items() }}
    <tr {{ if values.1 == player.selected_draw_number }} style="font-weight: bold" {{ endif }}>
        <td {{ if values.1 == player.selected_draw_number }} style="background-color: yellow" {{ endif }}>{{ values.1 }}</td>
        <td>{{ values.2 }}</td>
        <td>{{ values.3 }}</td>
        <td>{{ values.4 }}</td>
        <td {{ if values.6 == 0 }} style="background-color: red" {{ endif }}>{{ values.5 }}</td>
    </tr>
    {{ endfor }}
    <tr style="border-top: 2px solid black"></tr>
</table>

<!-- Highlighting Key -->
<div class="draws_key">
    <table>
        <th>Selected Outside Option:</th>
        <th style="width: 20px"></th>
        <td style="border: 1px solid black; background-color: yellow"></td>
    </table>
    <table>
        <th>Alternative Earned Less:</th>
        <th style="width: 20px"></th>
        <td style="border: 1px solid black; background-color: greenyellow"></td>
    </table>
    <table>
        <th>Alternative Earned More:</th>
        <th style="width: 20px"></th>
        <td style="border: 1px solid black; background-color: red"></td>
    </table>
</div>

<!--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 }}