{% 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>
    The button below will appear every 20 seconds. Click the button to be considered for proceeding to the game:
</p>
<p>
    <div id="activity-check" style="display: none;">
        <button id="activity-button" style="border-radius: 5px; background-color: #0d6efd; border-color: #0d6efd; color: white;">Click Me!</button>
    </div>
</p>
{% endblock %}

{% block scripts %}

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

    function showActivityCheck() {
        if (!isActive) {
            activityCheck.style.display = 'block';
        }
    }

    activityButton.addEventListener('click', function() {
        isActive = true;
        activityCheck.style.display = 'none';
        setTimeout(function() {
            isActive = false;
            showActivityCheck();
        }, 20000); // Show the button again after 20 seconds
    });

    showActivityCheck(); // Initial call to show the button
</script>
{% endblock %}