{% extends "global/Page.html" %}
{% load otree %}
{% block title %}
Task {{round}} of {{num_questions}} <hr>
{% endblock %}

{% block content %}

{% for late, early, sum in player.current_choice %}
<p>
    Your choices on the previous screen indicate that you value ${{ player.pay_amount }} <b>{{ late | lower }}</b> as much as ${{ player.switching_point | floatformat:0 }} <b>{{ early | lower }}</b>.
</p>

<br>
<div style="border: 3px solid red; padding: 8px; text-align: center">
    <b style="color: red;">How certain</b> are you that you actually value ${{ player.pay_amount }} <b>{{ late | lower }}</b>
    {%  if val_low < 0 %}
        somewhere between $0 and ${{ val_up2 | floatformat:0 }}
    {%  elif val_up > player.pay_amount %}
        somewhere between ${{ val_low2 | floatformat:0 }} and ${{ player.pay_amount }}
    {%  else %}
        somewhere between ${{ val_low | floatformat:0 }} and ${{ val_up | floatformat:0 }}
    {%  endif %}
     <b>{{ early | lower }}</b>?
</div>
{% endfor %}

<br>

<table style="table-layout: fixed; width: 100%;" >
    <tr>
        {% for x, i in radio_amounts %}
        <td style="width: 5%; text-align: center">
            <input type="radio" name="confidence" id="r{{ i }}" onclick="handleClick(this)" value={{ forloop.counter0 }}>
            <br>
            {% if x != 1 %}
            <label style="; font-size: x-small" for="r{{ i }}">
                {{x}}%
            </label>
        </td>
        <td>
            {% else %}
            <label style="; font-size: x-small" for="r{{ i }}">0%
            </label>
        </td>
            {% endif %}
        {% endfor %}
    </tr>
    <tr>
        <td style="padding: 0" colspan="41" >
            <div style="display: inline; float: left" ><b>very uncertain</b></div> <div style="display: inline; float: right"><b>completely certain</b></div>
        </td>
    </tr>
</table>

<br>
<br>
<br>

<div style="text-align: right;">
    <button type="submit" class="btn btn-primary" id="confirm" disabled="disabled">Next</button>
</div>

{{form.errors}}

<br>

{% endblock %}

{% block scripts %}

<script>
    function handleClick(checkedRadio) {
        checkedRadio.checked = true;
        var cansumbit = true;
        var conf = parseFloat(checkedRadio.value);
        var up = 100 - 5 * (20 - conf);
        document.getElementById("confirm").disabled = false;
        this.value = up;
}
</script>

{% endblock %}