{% extends "otree/GlobalBase.html" %}
{% load otree %}

{% block title %}
    Custom Waiting Page
{% endblock %}

{% block content %}
    <form method="post">
        {% csrf_token %}
        {{ form.button_clicked }}
        <p>Please click the button within the next {{ time_remaining|floatformat:0 }} seconds to proceed:</p>
        <button id="click-button" {% if time_remaining > 0 %}disabled{% endif %}>Click Me</button>
    </form>

    <script>
        var button = document.getElementById('click-button');
        button.addEventListener('click', function() {
            button.disabled = true;
            setTimeout(function() {
                button.disabled = false;
            }, 20000); // Re-enable the button after 20 seconds
        });
    </script>
{% endblock %}