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

{% block title %}The Treatment{% endblock %}

{% block content %}

<style>
    .otree-timer {
        display: none;
    }
</style>

<audio autoplay><source src="{% static 'audio/Armwrap.mp4' %}" type="audio/mpeg"></audio>

      <div class="card bg-light description">
    <div class="card-body" style ="font-size:120%;">

<p>
    We will ask you to wear an arm wrap that contains a gel pack for 2 minutes at the start of each block of 15 price series you will see.
    <br>
    <br>
    <strong> Sometimes the cold pack will be cold other times it will not.</strong>
</p>
<br>


        <br>

<p>
    If the arm wrap becomes unbearable at any point you may remove it but please press pause.
</p>
        <br>
        <br>
<p>
    Please watch the video down below on how to apply the arm wrap on your arm

</p>

    </div>
      </div>
<br>
<br>
<br>

<div class="card bg-light description">
    <div class="card-body" style ="font-size:120%;">
       <video style = "margin-left: auto; margin-right: auto; display:block;" controls width="75%"><source src="{% static 'video/ArmWrap.mp4' %}" type="video/mp4"></video>
    </div>
</div>
<br>
<br>
<button class="otree-btn-next btn btn-primary" style="float: right">Next--></button>

<script>
    // Hide the next button until the audio completes
$(".otree-btn-next").hide();

// Reveal the next button after the audio completes
setTimeout(
    function () {
        //alert("Time has run out. Please make your decision.");
        $(".otree-btn-next").show()
    },
    45*1000 // 5 seconds here. # updated to 28 seconds
);
</script>
{% endblock %}