{% extends "floodgame/Page.html" %}
{% load staticfiles otree_tags %}


{% block title %}
{{page_title}}
{% endblock %}

{% block content %}

{% include 'snippets/Progressbar.html' %}

<span style="text-align:center">
    <div class="alert alert-warning alert-dismissible" role="alert">
        <br><br>
        <h4><strong>Attention!</strong> This task is independent of the previous task.</h4>
         <br><br>
         <br><br><br>
         <br><br><br>
         <br>
            <button class="btn btn-default text-center" data-dismiss="alert" aria-label="Close">Close this window to start the task</button>
            <br><br> <br><br>

<br><br><br><br>
<br><br><br><br>

<br><br><br><br>
        <br><br><br><br>

     </div>
</span>

<div class="card"><div class="card-body"><p>

    For each of the rows below we ask you to choose between two <b>lotteries</b>: option C or option D. Please select the option you prefer.
    You can only switch once from option C to option D.
</p><p><strong>In case this task is selected for payment, we will pay the chosen option of a randomly selected row.</strong></p>

</div> </div>


<div align="middle">
    <table  style="width:100%" class="table table-sm table-striped">
        <tr >
            <th style="text-align:center; border-right:1px solid #000;border-bottom:1px solid #000" colspan="5"><h5>Option C</h5></th>
            <th style="text-align:center; border-bottom:1px solid #000" colspan="5"><h5>Option D</h5></th>
        </tr>
        {% for amount in vars_for_risk %}
            <tr>
                <td align="left"> 50% chance of
                <td align="left"><b>&euro;{{ amount.0 }} </b>
                <td align="left"> and 50% chance of
                <td align="left"> <b>&euro; {{ amount.1 }}</b>
                <td align="left" style="border-right:1px solid #000">
                    <input type="radio"
                           value="left"
                           name="{{ forloop.counter |json }}"
                           required>&nbsp;&nbsp;</td>
                <td align="middle" >
                    <input type="radio"
                           name="{{ forloop.counter |json }}"
                           value="right" data-amount="{{ forloop.counter |json }}"
                           required>
                </td>
                <td align="left"> 50% chance of
                <td align="left"><b>&euro; {{ amount.2 }} </b>
                <td align="left"> and 50% chance of
                <td align="left"> <b>&euro;{{ amount.3 }} </b>
            </tr>
        {% endfor %}
    </table>
</div>


    {{ form.errors }}
    <input type="hidden" name="switching_point_risk" id="id_switching_point"
           value="99">






    <button class="btn btn-primary btn-lg" name="selected" value="selected">Next</button>

{% include 'snippets/InstructionsCounter.html' %}

{% endblock %}




{% block scripts %}

    <script>
        $(document).ready(function () {
            $('input[type=radio]').change(
                function () {
                    var clickedRadio = this;
                    var afterClickedRadio = false;


                    var radios = document.querySelectorAll('input[type=radio]');
                    for (i = 0; i < radios.length; ++i) {
                        var radio = radios[i];
                        if (radio === clickedRadio) {
                            afterClickedRadio = true;
                            continue;
                        }
                        if (!afterClickedRadio && clickedRadio.value === 'left' && radio.value === 'left') {
                            radio.checked = true;
                        }
                        if (afterClickedRadio && clickedRadio.value === 'right' && radio.value === 'right') {
                            radio.checked = true;
                        }
                    }
                }
            );

            <!-- rename the selector when class names are stabilized -->
            $('button').click(function () {
                var radios = document.querySelectorAll('input[type=radio]');


                for (i = 0; i < radios.length; ++i) {
                    var radio = radios[i];
                    if (radio.value === 'right' && radio.checked) {
                        $('#id_switching_point').val(radio.dataset.amount);
                        break;
                    } else {
                        $('#id_switching_point').val(10);
                    }
                }
            });
        });
    </script>

{% endblock %}