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

{% block body_main %}
    <div class="container" style='max-width:970px'>
        <div class="page-header" style="padding-top: 40px">
            <h2>{% block title %}{{ page_title }}{% endblock %}</h2>
        </div>
        <div>
            {% if view.has_timeout_warning %}
                {% if use_legacy_timer_code %}
                    <div id="time-warning-limit" class="alert alert-warning" style="display:none;">
                        <div id="warning-clock">
                            <p>{{ timer_warning_text }}
                                <span style="font-weight: bold">
                                        <span class="glyphicon glyphicon-time"></span>
                                        <span id="warning-minutes"></span>:<span id="warning-seconds"></span>
                                </span>
                            </p>
                        </div>
                    </div>
                {% else %}
                    <div class="otree-timer alert alert-warning" id="otree-warning-timeout">
                        <p>{{ timer_warning_text }}
                            <span style="font-weight: bold">
                                <span class="glyphicon glyphicon-time"></span>
                                <span class="otree-warning-timer__time-left"></span>
                            </span>
                        </p>
                    </div>
                {% endif %}
            {% endif %}

            {% if form.errors %}
                <div class="alert alert-danger">
                    {% blocktrans trimmed %}Please fix the errors in the form.{% endblocktrans %}
                    {{ form.non_field_errors }}
                </div>
            {% endif %}

            <div id="error-notice" class="alert alert-danger"
                 style="display:none">
                {% blocktrans trimmed %}
                    An error occurred. Please check the logs or ask
                    the administrator for help.{% endblocktrans %}
            </div>


            <form action="" method="post" role="form" class="form"
                  id="form">{% csrf_token %}
                <input type="hidden" value="{{ request.path }}"
                       name="origin_url"/>
                {% form form using %}
                    {% formconfig row using "floppyforms/rows/bootstrap.html" %}
                    <div id="otree-content">
                        {% block content %}{% endblock %}
                    </div>
                {% endform %}
            </form>
        </div>
        <br/>
        {% if view.is_debug %}
            {% include 'otree/includes/debug_info.html' %}
        {% endif %}
    </div>
{% endblock %}


{% block internal_scripts %}
    {{ block.super }}

    {% if view.has_timeout_warning %}
        {% if use_legacy_timer_code %}
            <script src="{% static 'otree/js/jquery.countdown.js' %}"></script>
        {% else %}
            <script src="{% static 'otree/js/jquery.countdown.min.js' %}"></script>
        {% endif %}
    {% endif %}

    <script>
        function randomInt(min, maxExclusive) {
            return min + Math.floor(Math.random() * maxExclusive);
        }

        function randomChoice(arr) {
            var idx = randomInt(0, arr.length);
            return arr[idx];
        }

        $(function() {
            {% if view.has_timeout_warning %}
                {% if use_legacy_timer_code %}
                    $('div#time-warning-limit').show();
                    var currentDate = new Date();
                    var milliseconds = {{ timeout_warning_seconds|escapejs }}*1000;
                    $('div#warning-clock').countdown(currentDate.valueOf() + milliseconds, function(event) {
                        switch(event.type) {
                            case "seconds":
                                //if ((event.lasting.hours == 0) && (event.lasting.minutes == 0)) {
                                $(this).find('span#warning-'+event.type).html(event.value);
                                //}
                                break;
                            case "minutes":
                                $(this).find('span#warning-minutes').html(event.lasting.hours * 60 + parseInt(event.value));
                                break;
                            case "finished":
                                $('#warning-clock').hide(duration=0);
                                $('<input>').attr({
                                    type: 'hidden',
                                    name: 'timeout_warning_happened',
                                    value: '1'
                                }).appendTo('form');

                                // DOES NOT SUBMIT FORM

                                // show final warning message
                                var warning_html = '<p>' + "{{ timeout_warning_message }}" + '</p>';
                                $('#time-warning-limit').html(warning_html);
                                $('#time-warning-limit').removeClass('alert-warning').addClass('alert-danger');

                                break;
                        }
                    });
                {% else %}
                    var currentDate = new Date();
                    var remainingTimeoutSeconds = {{ timeout_warning_seconds|escapejs }};
                    var milliseconds = Math.floor(remainingTimeoutSeconds * 1000);
                    $('.otree-warning-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) {
                            $('<input>').attr({
                                type: 'hidden',
                                name: 'timeout_warning_happened',
                                value: '1'
                            }).appendTo('form');

                            // DOES NOT SUBMIT FORM

                            // show final warning message
                            var warning_html = '<p>' + "{{ timeout_warning_message }}" + '</p>';
                            $('#otree-warning-timeout').html(warning_html);
                            $('#otree-warning-timeout').removeClass('alert-warning').addClass('alert-danger');
                        });
                {% endif %}
            {% endif %}
        });
    </script>
{% endblock %}