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

{% block title %}
<div class="row justify-content-end">
	<div class="col-4 align-self-end">
		<h6 class="text-right">Participant ID: {{ participant_id }}, Stage: 2</h6>
	</div>
</div>
<div id="header">Instructions for Stage 2</div>
{% endblock %}

{% block content %}

<audio controls autoplay controlsList="nodownload">
  <source src="{% static "Audio/T1-stage2.mp3" %}" type="audio/mp3">
  Your browser does not support the audio element.
</audio>

{% include "T1/InstructionsStage2.html" %}	

{% include "buttons/ProceedButton.html" %}
<p>
	The "Proceed" button will be activated after 30 seconds.
</p>

<script type="text/javascript">
	document.getElementById('proceedButton').disabled = true;
	setTimeout(() => {
		document.getElementById('proceedButton').disabled = false;
	}, 30000);
</script> 

{% endblock %}