{% load static %}

{% block content %}
<div class="container">
    <div class="card mt-5">
        <div class="card-body">
            <h3 class="card-title">Please Wait</h3>
            <p>The next task will start shortly. Please feel free to take a short break now.</p>
        </div>
    </div>
</div>

<script>
    // JavaScript to handle the countdown
    var timeLeft = {{ timeout_seconds }};
    var timerElem = document.getElementById('timer');

    var countdownTimer = setInterval(function() {
        if (timeLeft <= 0) {
            clearInterval(countdownTimer);
        } else {
            timerElem.innerHTML = timeLeft;
        }
        timeLeft -= 1;
    }, 1000);
</script>
{% endblock %}