{% extends "global/Base.html" %}
{% load staticfiles otree_tags %}


{% block content %}


<div id="time-limit" align='right' class="otree-timer alert alert-warning" style="display:none;width:100px;
            height:50px;float:right;">
    <p style="text-align:center;">
        <span style="font-weight: bold">
            <span class="glyphicon glyphicon-time"></span>
            <span class="otree-timer__time-left"></span>
        </span>
    </p>
</div>

<p> <br>
<p>
<p> <br>
<p>
<p> <br>
<p>
<div id='number'>

    Bitte warten Sie.

</div>



<div id='hide'>
    <p>
        <input id='weiter' style="height:1px;width:1px;background-color: white;"
            style="height:1px;width:1px;background-color: white;"
            class="btn btn-primary btn-large btn-primary next-button" type="submit" value="Weiter" />
    </p>
</div>

{% endblock %}



{% block scripts %}

<script src="/static/otree/js/jquery.countdown.min.js"></script>

<script>
    $(document).ready(function () {

        $('#hide').hide();
        $('#number').hide();


    });

    window.onload = function () {
        $('#number').show();
        $('div#time-limit').show();
        var currentDate = new Date();
        var milliseconds = 30.7 * 1000;
        $('.otree-timer__time-left').countdown(currentDate.valueOf() + milliseconds)
            .on('update.countdown', function (event) {
                // %-N is "Total count of minutes till the end, non-padded"
                // %S is seconds left
                var format = '%-N:%S';
                $(this).html(event.strftime(format));
            })
            .on('finish.countdown', function (event) {
                $('#number').hide();
                $("#weiter").click()
            });
    };


</script>



{% endblock %}