{{ block title }}
  <center>  Workers' chat </center>
{{ endblock }}


{{ block content }}



<div>
    <strong>Time remaining: <span id="timer">{{ time }}</span> seconds</strong>
</div>

<script>
    let secondsLeft = {{ time }};
    const timerElement = document.getElementById("timer");

    function updateTimer() {
        if (secondsLeft > 0) {
            secondsLeft -= 1;
            timerElement.textContent = secondsLeft;
            setTimeout(updateTimer, 1000);
        } else {
            // Timer ends here, but nothing happens — this is a soft timer.
            timerElement.textContent = "0";
            document.body.style.backgroundColor = "#ffcccc";
            document.getElementById("timeout-message").style.display = "block"
        }
    }

    setTimeout(updateTimer, 1000);
</script>

<div id="timeout-message" style="display: none; font-weight: bold; color: red; margin-top: 20px;">
    ⏰ Time's up! You can still communicate if you want, but please keep it short. <br><br>
    Once you finish push the <b> Next button </b> to continue.
</div>


<br>

    {{ chat nickname=nickname channel=rund}}
<br>

<center>
    <i> After clicking the <b> Next button </b> you will proceed to the next phase. </i>
     <br><br>
    {{ next_button }}

</center>

{{ endblock }}