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

{{ block title }}
  <p>{{if subsession.round_number == 1 }}
    Practice Round
{{ else }}
   Round {{ round_shown }} of {{ total_shown }}
{{ 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 fight or flee in period 3.
</p>

    {{ formfields }}


    <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 }}