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

{% block content %}

            Please wait until all members of your organization have completed the study. <br>
            This might take a while depending on the speed of the other members. <br>
            For the matching to work, you unfortunately have to <b>stay on this tab.</b> <br>
            If your tab has a green circle 🟢, it is active for matching.<br>
            If your tab has a yellow circle 🟡, it can not get matched.<br>
            Once all members of your organization have completed the study and are matched, you will be directed to your payoff page.<br><br>

            <!-- Hidden text initially set to display: none -->
            <p id="additionalInfo" style="display: none; color: red; font-weight: bold;">
                We are sorry that it takes longer for you to get matched than expected.
                You can either stay on this site until a match is realized (however, you need to stay active on this tab),
                or you can choose to leave the study. In this case, we will still match and pay you as described,
                but you will just receive the payment associated with the outcome and
                you will not receive detailed information about the actual outcome.
            </p>

<script>
// Function to show the hidden text based on the initial time stored
function showAdditionalInfo() {
    var now = new Date().getTime();
    var initialTime = sessionStorage.getItem('initialTime');
    if (!initialTime) {
        sessionStorage.setItem('initialTime', now);
        initialTime = now;
    }
    var elapsedTime = now - initialTime;
    var remainingTime = 300000 - elapsedTime; // 1 minute - elapsed time
    if (remainingTime < 0) {
        // If more than 1 minute has elapsed, show the message
        document.getElementById('additionalInfo').style.display = 'block';
    } else {
        // Otherwise, set a timeout for the remaining time
        setTimeout(function() {
            document.getElementById('additionalInfo').style.display = 'block';
        }, remainingTime);
    }
}

// Run the function on page load
showAdditionalInfo();
</script>

{% endblock %}