{% extends "global/Page.html" %}
{% load otree otree_tools %}

{% block title %}
{% endblock %}

{% block content %}

{#    <button id="testing" type="button">#}
{#        Reset timer to 30#}
{#    </button>#}

    <div class="column">
        {% for field in form.visible_fields|slice:":21" %}
            <div id="slider">
                {{ field }}
            </div>
        {% endfor %}
    </div>
    <div class="column">
        {% for field in form.visible_fields|slice:"21:42" %}
            <div id="slider">
                {{ field }}
            </div>
        {% endfor %}
    </div>
    <div class="column">
        {% for field in form.visible_fields|slice:"42:" %}
            <div id="slider">
                {{ field }}
            </div>
        {% endfor %}
    </div>
    {% next_button %}
{% endblock %}

{% block styles %}
    <style type="text/css">
        {% include 'pd_rest/js_html_css/effort.css' %}
    </style>
{% endblock %}

{% block scripts %}
    <script>
        $('#testing').click(function () {
            var ThirtySeconds = new Date().getTime() + 30000;
            $('.otree-timer__time-left').countdown(ThirtySeconds);
        });
    </script>
{% endblock %}