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

{% block title %}
    Instructions (Page 1/2)
{% endblock %}

{% block content %}
    <h6>Please take your time reading and understanding these instructions</h6>

    {% include Constants.instructions_template %}

    <strong><input class="btn btn-primary btn-large btn-primary next-button" type="submit" value="Next"/>
        <script>
            var showButton = document.getElementsByClassName("btn btn-primary btn-large btn-primary next-button")[0];
            var counter = 90;
            var newElement = document.createElement("p");
            newElement.innerHTML = "You can proceed to the Instructions (Page 2/2) in " + counter + " seconds.";
            var interval;
            showButton.parentNode.replaceChild(newElement, showButton);
            interval = setInterval(function() {
                counter--;
                if(counter < 0) {
                    newElement.parentNode.replaceChild(showButton, newElement);
                    clearInterval(interval);
                } else {
                    newElement.innerHTML = "You can proceed to the Instructions (Page 2/2) in " + counter.toString() + " seconds.";
                }
            }, 1000);
        </script></strong><p>

    {% endblock %}