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

{% block title %}


<p>{% if num_round == 0 %}
    Practice Round
{% else %}
   Round {{num_round }} of {{ num_of_round }}
{% endif %}
    </p>
    <p>
        Period 3
    </p>
{% endblock %}

{% block content %}

<div class="otree-timer alert alert-warning" id="my_timer"></div>

<p>
    Your strength in this round is <strong>{{ player.ability }}</strong>.
</p>

<p>
    Please decide whether to flee or fight in period 3.
</p>

    {% formfield player.period3_choice label="Please make your decision" %}

   <button>
       Submit
   </button>





{% endblock %}



{% block scripts %}


<script>
var started_time=Date.now();
var alerted = 0;


    time_left={{remaining_timeout_seconds}};
    console.log(time_left);
    console.log(started_time);
    countdown = setInterval(function() {
    updated_time = Math.floor(time_left - (Date.now() - started_time)/1000);
    $('#my_timer').text("Time left to complete this period: 0:0" + updated_time)
    if (updated_time < 0 & alerted==0){
        alert("Time has run out. Please make your decision.");
        alerted = 1;
        $('#my_timer').text("Time has run out. Please make your decision." );
        clearInterval(countdown);
    }
    },
    1000
    );

    </script>


{% endblock %}