{% extends 'otree/WaitPage.html' %}
{% load staticfiles otree_tags %}
{% block title %}Please wait!{% endblock %}
{% block styles %}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css"
          integrity="sha256-+1Yu+5ObnnRUhRwyuxT1eNj5iVx/zBNS75tYlzc1z7U=" crossorigin="anonymous"/>
    <style>
        #left_to_wait {
            font-weight: bold;
        }

        span.flip-clock-label {
            display: none;
        }
    </style>
{% endblock %}
{% block content %}
    <div class="your-clock"></div>
    {% comment %}
        Can be used to display how many participants are missing, if the matching logic is simple (i.e. a fixed number of players, and no types)
        Otherwise, do not use, it might show things like 5 participants are missing waiting for -1 more, for groups of 4, if the types that have arrived do not correspond to the composition of the groups
        <div><b><span id="how_many_arrived"></span>/{{ Constants.players_per_group }}</b> participants are
            already here...
        </div>
        <div>Waiting for <span id="left_to_wait"></span> more <span id="left_to_wait_people"></span>...</div>
        <br/>
    {% endcomment %}

    <div id="otree-timeout-warning" class="alert alert-warning" style="display:block;">
        <p>You can finish the study if nobody arrives in:
            <span class="glyphicon glyphicon-time"></span>
            <strong><span id="otree-timer__time-left"></span></strong>
        </p>
    </div>

    <form action="" method="post" role="form" class="form">
        {% csrf_token %}
        <div>
            <button class="btn btn-primary" id='finish_study'
                    style="display: none;"
                    name="endofgame" value="{{ player.pk }}">
                Finish the study
            </button>
        </div>
        <br>
    </form>

    {% include task_to_show.html %}

{% endblock %}

{% block scripts %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.js"
            integrity="sha256-acPJCWQhgmeUTM0IJ84lOWiwGNtUhcjJOlOjYH00480=" crossorigin="anonymous"></script>
    {% include 'otree_mturk_utils/waiting_page_channel.js.html' %}
    <script src="{% static 'otree/js/jquery.countdown.min.js' %}"></script>
    <script>
        var clock;
        $(document).ready(function () {

            clock = $('.your-clock').FlipClock({
                clockFace: 'MinuteCounter'
            });
            clock.setTime({{time_passed}});
        });
        {#        console.log(clock.face);#}
    </script>
    <script type="text/javascript">

        {#        $('div#otree-timeout').show();#}
        var currentDate = new Date();
        var milliseconds = Math.floor({{ time_left|json }} * 1000
        )
        ;
        $('div#otree-timeout-warning').show();
        $('span#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';
                var remainingTime = event.strftime(format);
                $(this).html(remainingTime);

                if (event.strftime('%-M') > 30) {
                    // Do not show if max waiting time is above 30 minutes
                    $('div#otree-timeout-warning').filter(":visible").hide(duration = 0);
                }
                ;

            })
            .on('finish.countdown', function (event) {
                $('div#otree-timeout-warning').hide(duration = 0);
                $('#finish_study').show();
            });


    </script>

{% endblock %}




