{% 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 or view.has_timeout_warning %}
                {% include 'otree/includes/TimeLimit.html' with form_element_id="form" %}
            {% 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 }}

    <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() {
            $('div#time-limit').show();
            var currentDate = new Date();
            var milliseconds = {{ timeout_warning_seconds }} * 1000;
            $('div#clock').countdown(currentDate.valueOf() + milliseconds, function(event) {
                switch(event.type) {
                    case "seconds":
                        $(this).find('span#'+event.type).html(event.value);
                        break;
                    case "minutes":
                        $(this).find('span#minutes').html(event.lasting.hours * 60 + parseInt(event.value));
                        break;
                    case "finished":
                        $('#clock').hide(duration=0);
                        var warning_html = '<p>' + "{{ timeout_warning_message }}" + '</p>';
                        $('#time-limit').append(warning_html);
                        $('#time-limit').removeClass('alert-warning').addClass('alert-danger');

                        // no auto-submit!

                        break;
                }
            });
        });
    </script>

    {% if view.has_timeout_warning %}
        {% include 'otree/includes/TimeLimit.js.html' %}
    {% endif %}
{% endblock %}