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

{% block title %}
Task {{round}} of {{num_questions}}<br>
<h5>Decision Screen (1/2)</h5>
<hr>
{% endblock %}

{% block content %}

<style>
    .otree-timer {
        display: none;
    }
</style>
<!--
<p style="text-align:center; font-size:125%; background-color:powderblue;"> <b><span id="time-left"></span></b></p>
-->

{% if player.lottery_amount < 0 %}<p> You have a budget of ${{abs_lv}}. {% endif %}

<table class="table table-bordered" align="center" style="border-spacing: 0; width: 50%;">
  <tr>
    <td style="vertical-align: middle; text-align: center" >
      <div style="display: inline-block; text-align:left">
                  {% for prob, sum, abssum in current_lottery %}
      
                   With probability <b>{{ prob }}% : </b>
                    
                     <b>Get</b>
             

		     <b>$ {{ sum }}</b> <br>

		     {% endfor %}
   </div>
    </td>
  </tr>
</table>


<p>
    Which certain {% if player.lottery_amount > 0 %} payment {% else %} loss {% endif %} is worth as much to you as this lottery?
</p>

<p>
    {% if player.lottery_amount > 0 %} Getting {% else %} Losing {% endif %}
    $<input type="number" min="0" max="{{ abs_lv }}" step="0.01" id="switching_point" name="switching_point" style="width: 50px" required> with certainty is worth as much to me as this lottery.
</p>

 <!--<input type="hidden" name="timed_out" id="timed_out">-->

 <div style="text-align: right;">
    {% next_button %}
 </div>

 <script>
       //  let customTimerEle = document.getElementById('time-left');

    //     document.addEventListener("DOMContentLoaded", function (event) {
    //         $('.otree-timer__time-left').on('update.countdown', function (event) {
    //             customTimerEle.innerText = event.offset.totalSeconds;
    //         });
    //     });

    // $(function () {
    //     $('.otree-timer__time-left').on('update.countdown', function (event) {
    //         if (event.offset.totalSeconds === 10) {
    //             document.getElementById('time-left').style.color = "#ff0000"; 
    //         }
    //     });
   // });

   /*
   function Timer() {
       var round = "{{round}}"+"_"+"{{id}}"
      
      var counter = localStorage.getItem(round) ? localStorage.getItem(round) : 25;
      document.getElementById("time-left").innerHTML = "You have " + counter + " seconds left.";
     var myTimer = setInterval(function() {
	 counter--;
	  document.getElementById("time-left").innerHTML = "You have " + counter + " seconds left.";
    if (counter < 10) {
	document.getElementById("time-left").style.color = "red";
	
    }

	

	 
    if (counter <= 0) {
      clearInterval(myTimer);
	document.getElementById("time-left").innerHTML = "Time is up. Please make your decision NOW.";
	$('#timed_out').val(true)
	
         counter = 0

	  
    }
    localStorage.setItem(round, counter);
    
  }, 1000);
}
Timer();
*/

    </script>

{% endblock %}