{% extends "otree/WaitPage.html" %}

{% block content %}

{{ block title }}{{ title_text }}{{ endblock }}

<p>
    We are trying to pair you with other participants.
</p>
{% if prioritised == True %}
<p>
    Thank you for waiting patiently. We are prioritizing you for the next group.
</p>
{% endif %}
<p>
    <div id="activity-check">
        <p>Click the button below:</p>
        <button id="activity-button" style="border-radius: 5px; background-color: green; border-color: green; color: white;">Click Me!</button>
    </div>
</p>
{% endblock %}

{% block scripts %}

    <script>
        var activityButton = document.getElementById('activity-button');
        var activityCheck = document.getElementById('activity-check');
        var buttonActive = true;

        function toggleButtonColor() {
            if (buttonActive) {
                activityButton.style.backgroundColor = "red";
                activityButton.style.borderColor = "red";
                buttonActive = false;
            } else {
                activityButton.style.backgroundColor = "green";
                activityButton.style.borderColor = "green";
                buttonActive = true;
            }
        }

        activityButton.addEventListener('click', function() {
            toggleButtonColor();
        });

        setInterval(toggleButtonColor, 20000);

        toggleButtonColor(); // Initial call to set button color
    </script>
{% endblock %}