{% load otree %}

<div class="btn-group btn-group-lg back-forward-button" role="group" aria-label="...">
    {% if both_btns %}
        <button name="{{ widget.name }}"
                data-val=-1
                id="id_{{ widget.name }}_back"
                value="True"
                class="btn btn-danger btn-large navbuttons"
                {% if init_disabled %}     disabled {% endif %}
        >Back
        </button>
    {% endif %}
    <button name="{{ widget.name }}"
            data-val=1
            id="id_{{ widget.name }}_forward"
            value="False"
            {% if init_disabled %}     disabled {% endif %}
            class="btn btn-primary btn-large navbuttons">Next
    </button>
</div>
{% if init_disabled %}
    {% block scripts %}
        <script src="{% static 'otree/js/jquery.countdown.min.js' %}"></script>
        <script>
            $('.back-forward-button').find('button').prop("disabled", true);
            $(function () {
                $('.next_btn_timer').find('.btn').prop("disabled", true);
                var currentDate = new Date();
                var remainingTimeoutSeconds = 1;
                var milliseconds = Math.floor(remainingTimeoutSeconds * 1000);
                $('.back-forward-button').countdown(currentDate.valueOf() + milliseconds)
                    .on('finish.countdown', function (event) {
                        $('.back-forward-button').find('button').prop("disabled", false);
                    });
            });
        </script>
    {% endblock %}
{% endif %}