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

{% block title %}
<div class="row justify-content-end" style="height: 50px;">
  <div class="col-4 align-self-end">
    <h6 class="text-right">Participant ID: {{ participant_id }}, Stage: 3, Round: <strong>{{ round_number }}</strong>/15</h6>
  </div>
</div>
<div style="font-size: 15px;" id="timeout-seconds" class="alert alert-warning" role="alert">
  Time left to complete this page: 10 seconds
</div>
{% endblock %}

{% block content %}


{{ form.action_choice.errors }}
<div class="row justify-content-center">
	<div class="card text-center" style="border: none; width: 7rem;">
	  <div class="card-body">
	  	Context
	  </div>
	  <img src="{% static context_image %}" class="card-img-top"/>
	</div>
</div>
<br>
<p class="text-center">
	<strong><u>Please select your action by clicking on the button below it</u></strong><br>
	If you wish to change your action, simply click on the one you wish to change to<br>
	Please click 'Confirm' after you are ready to proceed with your choice
</p>
<div class="card-group">
	{% for action_image in action_images %}
		<div class="card text-center" style="border: none; margin-left: 10px; margin-right: 10px;">
		    <img src="{% static action_image %}" class="card-img-top mx-auto d-block" style="height: 100px; width: 100px">
		    <div class="card-body">
		      <input type="radio" id="male" name="action_choice" value={{ forloop.counter }}>
		    </div>
  		</div>
	{% endfor %}
</div>

<script type="text/javascript">
	var timeout = 10;
	const interval = setInterval(() => {
		timeout--;
		document.getElementById('timeout-seconds').innerHTML = `Time left to complete this page: ${timeout} seconds`;

		if (timeout === 0) {
			clearInterval(interval);
			alert('Please choose an action.')
		}
	}, 1000);

</script>

{% include "buttons/ConfirmButton.html" %}
{% endblock %}