{% extends 'otree/WaitPage.html' %}
{% load otree %}
{% block scripts %}
    <script src="/static/otree/js/jquery.countdown.min.js"></script>
    <script>
        $(function () {
            var startTimer = {{ participant.vars.start_waiting_for_partners|json }};
            var max_waiting = {{ Constants.max_seconds_waiting_for_partners|json }};
            var currentDate = new Date().valueOf();
            var remainingTimeoutSeconds = max_waiting - (currentDate - startTimer * 1000);
            var milliseconds = Math.floor(remainingTimeoutSeconds);
            $('.otree-timer__time-left').countdown(currentDate.valueOf() + milliseconds)
                .on('update.countdown', function (event) {
                    var format = '%-N:%S';
                    $(this).html(event.strftime(format));
                })
                .on('finish.countdown', function (event) {
                    $('#form').submit();
                });
        });
    </script>
{% endblock %}
{% block styles %}
    <style>
        .progress {
            margin-top: 16px;
        }
        .otree-timer {
        }
    </style>
{% endblock %}
{% block title %}<div align="center">{{ title_text }}</div>{% endblock %}
{% block content %}
    <div class="otree-timer alert alert-warning">
        <p>Remaining time
            <span style="font-weight: bold">
                <span class="otree-timer__time-left"></span>
            </span>
        </p>
    </div>
    <p align="center">
        We are identifying the next activity (and your potential partner).<br> 
        This will take two minutes maximum.<br> 
        Thank you for your patience!
    </p>
    <form action="" method="post" role="form" id="form" class="form">
        {% csrf_token %}
    </form>
{% endblock %}