{{ 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 }}
<u><b>Stage 2: Decision 3 will start soon</b></u>
{{ endblock }}

<h2 class="BeforeStart">You are still assigned <span class="highlight">{{ role }}</span> role</h2>

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