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

{% block head_title %}

        Study

{% endblock %}

{% block styles %}

    <style type="text/css">
        h1 {text-align: center; font-size: 35px;}

        .otree-timer {
            display: none;
        }

    </style>

{% endblock %}

{% block content %}

<h1>Instructions</h1>



     <script>

        $(function deductiontimer() {
                var seconds, minutes;
                $('.otree-timer__time-left').on('update.countdown', function (event) {
                    seconds = event.offset.totalSeconds%60;
                    minutes = Math.floor(event.offset.totalSeconds/60);
                    seconds = seconds;
                    document.querySelector('#deductiontimer').textContent =  seconds;
                });
            })

        </script>


        {% if timeout_options != 300 %}
            <div class="card bg-light m-3">
                <div class="card-body">
                    <div class="justify">
                        <p style="font-size:18px; text-align:center;">
                            The time limit for Game {{game_number}} is <span style="font-weight: bold;">  {{timeout_options}} </span> seconds. <br>
                        </p>
                    </div>
                </div>
            </div>
        {% endif  %}

        {% if timeout_options == 300 %}
            <div class="card bg-light m-3">
                <div class="card-body">
                    <div class="justify">
                        <p style="font-size:18px; text-align:center;">
                            There is <span style="font-weight: bold;">  no time limit </span>  for Game {{game_number}}. <br>
                        </p>
                    </div>
                </div>
            </div>
        {% endif  %}


        <div>
            <p style="font-size:15px; color: black;  margin-Left:35px; text-align:right;"> Seconds left on this page: <span id="deductiontimer"  style="color:black;
            text-align:right; font-size: 15px; font-weight: bold;"> </span>  </p>
        </div>



<input type="hidden"   name="my_page_timeout_seconds"          id="id_my_page_timeout_seconds"   />


{{ form.errors }}


{% endblock %}



{% block scripts %}
    <script type="text/javascript">

        var my_page_timeout_seconds = js_vars.my_page_timeout_seconds;
        document.getElementById('id_my_page_timeout_seconds').value = my_page_timeout_seconds;



    </script>
{% endblock %}