{% extends 'otree/WaitPage.html' %}
{% load staticfiles otree %}
{% block title %}
    Please wait for the system to match you with other participants...
{% endblock %}


{% block content %}
<div class="your-clock"></div>
{#<div><b><span id="how_many_arrived"></span></b> participants are currently in the waiting room.</div>#}
{#<br/>#}

{#<p>#}
{#    You are being matched with another participant to continue with the experiment.#}
{#    </p>#}
    <p>
    The experiment will end if no other participants showing up in {{wait_minutes}} minutes or when
    there are no more participants to be matched with you.
</p>

<div style="font-size:20px;text-align:center;font-weight:bold" id="counter" class="p-2 mb-2 bg-warning text-dark">Loading ...</div>


    <p style="display: none;" id="finish_text">
       Because you were not able to be matched with another participant, the experiment is ending.
    </p>

{% endblock %}

{% block scripts %}
<script>
function pad(n, width, z) {
  z = z || '0';
  n = n + '';
  return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}

// countdown using javascript Date
// Set the date we're counting down to
var countDownDate = new Date({{ expiry_timestamp }}).getTime();

// Update the count down every 1 second (1000 milliseconds)
x = setInterval(timer, 1000);

function timer() {
    // Get today's date and time
    var now = new Date().getTime();
    // Find the distance between now and the count down date
    var distance = countDownDate-now;
    // Time calculations for days, hours, minutes and seconds
    var minutes = pad(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)),2);
    var seconds = pad(Math.floor((distance % (1000 * 60)) / 1000),2);
    // Display the result in the element with id="demo"
    $("#counter").html("The current task will be skipped if no one arrives in " + minutes + ":" + seconds);
    //removing the option for reminder
    // If the count down is finished, write some text
    if (distance <= 0) {
        clearInterval(x);
        $('#counter').hide(duration = 0);
        $('#finish_text').show();
    }
}
</script>
{% endblock %}