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

{% block head %}
    <style>
        ol {
            list-style-position: inside;
            padding-left: 0; /* Remove default padding */
        }
        li {
            text-indent: -1em; /* Adjusts the indent of the text */
            padding-left: 1em; /* Adds padding to align with the text above */
        }
    </style>
{% endblock %}

{% 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, please keep this tab active by <b>staying 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 cannot get matched.<br>
            Once all members of your organization have completed the study and are matched, you will be directed to your payoff page and the study concludes.<br><br>

            <!-- Hidden text initially set to display: none -->
            <p id="additionalInfo1" class="additionalInfo" style="display: none; color: red; font-weight: bold;">
            We apologize that the matching process is taking longer than expected.<br>
                If you wish, you can:</p>

                <ol id="additionalInfo2" class="additionalInfo" style="display: none; color: red; font-weight: bold;">
                    <li>Continue to keep the tab active until you are matched.</li>
                    <li>Keep the tab open but inactive. You can return to this tab periodically to check whether you have been matched and eventually you will see the outcome of the study.</li>
                    <li>Close the tab. We will then still match you and pay you accordingly once all members of the organization have completed the study, but you will not be able to receive detailed information about the actual outcome of the study.</li>
                </ol>
            <p id="additionalInfo3" class="additionalInfo" style="display: none; color: red; font-weight: bold;">
                Thank you for your understanding.
            </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; // 5 minutes - elapsed time
    if (remainingTime < 0) {
        // If more than 5 minutes have elapsed, show the message
        var elements = document.getElementsByClassName('additionalInfo');
        for (var i = 0; i < elements.length; i++) {
            elements[i].style.display = 'block';
        }
    } else {
        // Otherwise, set a timeout for the remaining time
        setTimeout(function() {
            var elements = document.getElementsByClassName('additionalInfo');
            for (var i = 0; i < elements.length; i++) {
                elements[i].style.display = 'block';
            }
        }, remainingTime);
    }
}

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

{% endblock %}