{% extends 'UG/CustomWaitPage.html' %}
{% load staticfiles otree_tags %}
{% block title %}Please wait!{% endblock %}
{% block styles %}
<style>
#left_to_wait{font-weight:bold;}
</style>
{% endblock %}
{% block content %}
    {{block.super}}
    {% if subsession.not_enough_players %}

      <div id="not_enough_players" class="alert alert-danger" role="alert">
        Unfortunately, one of the other partipants has left. Now
        there is not enough participants left to complete the study.
        <br>
        Please, click 'Finish the study'.
        <br>
        <b>You are still eligible for the participation fee!</b>
        <br>
        We apologize for the inconvenience.
      </div>
    {% else %}
    <div id="otree-timeout" class="alert alert-warning" style="display:block;">
        <p>You can finish the study if nobody arrives in:
            <span style="font-weight: bold">
                <span class="glyphicon glyphicon-time"></span>
                <span id="minutes"></span>:<span id="seconds"></span>
            </span>
        </p>
    </div>
    {% endif %}
    <form action="" method="post" role="form" class="form">
    {% csrf_token %}
    <div>
     <button class="btn btn-primary" id='finish_study' style="display:    {% if subsession.not_enough_players %}inline{% else %}none{% endif %};" name="endofgame" value="{{player.pk}}">
       Finish the study
     </button>
    </div><br>
    </form>
{% endblock %}

{% block scripts %}
    {{block.super}}
    <script type="text/javascript" src="/static/otree/js/jquery.countdown.js"></script>

    <script type="text/javascript">
        $(function() {
          $('div#otree-timeout').show();
            var currentDate = new Date();
            var milliseconds = Math.floor({{ time_left|json }}*1000);
            $('#otree-timeout').countdown(currentDate.valueOf() + milliseconds, function(event) {
                switch(event.type) {
                    case "seconds":
                        $(this).find('span#seconds').html(event.value);
                        break;
                    case "minutes":
                        $(this).find('span#minutes').html(event.lasting.hours * 60 + parseInt(event.value));
                        break;
                    case "finished":
                        $('#otree-timeout').hide(duration=0);
                        $('#finish_study').show();
                        break;
                }
            });
        });
    </script>

{% endblock %}