{{ extends 'otree/WaitPage.html' }}
{{ block title }}
{{ title_text }}
{{ endblock }}

{{ block content }}
<style>
    {% include "_static/styles.css" %}
</style>

    <p class="center large"><b>
        If you're stuck on this waiting page, please read the following <u>Note</u>.<br>
        Don't worry if it automatically navigates to the next page.
    </b></p>

    <p class="center large"><b><u>Note:</u></b></p>

    <p>
        As part of this experiment, you will be randomly grouped with other participants from the <i>Prolific</i> subject pool. However, please note that since this is an online experiment, some participants may unexpectedly drop out from your group. <u>To ensure that you do not remain stuck on this wait page, we have set up a maximum waiting time.</u>
    </p>

    <p><b>The maximum wait time is: {{ max_time_in_minutes }} minute(s)</b></p>

    <p>
        If you are not grouped within {{ max_time_in_minutes }} minute(s), the page will automatically redirect you to a survey. <u>Please note that you will receive payment for completing the survey, even if you are not grouped with other participants.</u>
    </p>
    <p>
        Please refer to the timer below for your convenience:
                <div id="timer" class="center large"></div>
        In case the page does not redirect automatically after {{ max_time_in_minutes }} minute(s) due to any technical issue, <u>please refresh the page.</u>
    </p>
    <p>
        We kindly request you to remain on this wait page and avoid switching to a different window or browser tab. If you do switch, you will be excluded from the grouping after a short period of time. Therefore, <b>please avoid leaving this page or switching tabs</b>. <br><br>
    </p>
     <p class="center large">
         Thank you for you patience.
     </p>
    

<script type="text/javascript">
    window.onload = function startTime() {
        const today = new Date();
        let h = today.getHours();
        let m = today.getMinutes();
        let s = today.getSeconds();
        m = checkTime(m);
        s = checkTime(s);
        document.getElementById('timer').innerHTML = "<b>" + h + ":" + m + ":" + s + "</b>";
        setTimeout(startTime, 1000);
    }

    function checkTime(i) {
        if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
        return i;
    }
</script>

{{ endblock }}