{% 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: 1</h6>
	</div>
</div>
Instructions for Stage 1: Lottery
{% endblock %}

{% block content %}

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

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

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

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