{% extends "global/Base.html" %}
{% load staticfiles otree_tags %}

{% block title %}
Bonus Lottery<hr>
{% endblock %}

{% block content %}
    <h3> Screen 2</h3>
    <p>Your endowment for this lottery is {{ endowment }}.</p>

    {% if round == 1 %}<b>Auto-completion</b>: The table auto-completes your choices so you don't
have to click through all rows. You do not have to start at the top of the table.
If you select Option A in any one row,
we assume that you will also prefer Option A in all rows <i>above</i> that row. If you select Option B in any one row,
we assume that you will also prefer Option B in all rows <i>below</i> that row.  <br>
    {% endif %}
    <!--<p>In each of the rows below please indicate whether you prefer Option A or Option B.</p>-->


    <br>



    <table class="table table-bordered" style="border-spacing: 0; width: 100%">
        <colgroup>
            <col width="40%">
            <col width="15%">
            <col width="40%">
        </colgroup>
        <tr>
            <td align="center"><b>Option A</b></td>
            <td></td>
            <td align="middle"><b>Option B</b></td>
        </tr>
{% for counter, amount in player.load_right_side_amounts1 %}

     {% if counter == 1 %}
        <tr>



    <td style="vertical-align: middle; text-align: center" rowspan="{{table_length1}}">
        With probability <b>30% : </b> <b style="color: green"> Get</b> <b> $  24</b> <br>
                   With probability <b>70% : </b> <b style="color: green"> Get</b> <b>  $ 2</b>
    </td>


                <td align="middle" style="padding-top: 1px; padding-bottom: 1px">
                    <input type="radio" name="amount_{{ amount }}" value="left"
                           required >&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
                    <input type="radio" name="amount_{{ amount }}"
                           value="right" data-amount="{{ amount }}"
                           required >
                </td>
                <td align="middle" style="padding-top: 1px; padding-bottom: 1px">
                    {%  if amount >= 0 %}
                    With certainty: <b style="color: green">&nbsp;&nbsp;Get</b>&nbsp;
                        {%  else  %}
                    With certainty: <b style="color: red">&nbsp;&nbsp;Lose</b>&nbsp;
                        {%  endif %}

                    <b>$ {{ amount | abs }} &nbsp;</b>
                </td>
            </tr>
{% else %}
          <tr>
                <td align="middle" style="padding-top: 1px; padding-bottom: 1px">
                    <input type="radio" name="amount_{{ amount }}" value="left"
                           required >&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
                    <input type="radio" name="amount_{{ amount }}"
                           value="right" data-amount="{{ amount }}"
                           required >
                </td>
                <td align="middle" style="padding-top: 1px; padding-bottom: 1px">
  {%  if amount >= 0 %}
                    With certainty: <b style="color: green">&nbsp;&nbsp;Get</b>&nbsp;
                        {%  else  %}
                    With certainty: <b style="color: red">&nbsp;&nbsp;Lose</b>&nbsp;
                        {%  endif %}                    <b>$ {{ amount | abs }} &nbsp;</b>
                </td>
            </tr>
{% endif %}
{% endfor %}
    </table>

    {{ form.errors }}
    <input type="hidden" name="load_switching_point" id="load_switching_point">

<div style="text-align: right;">
  <button class="btn btn-primary" onclick="myFunction()">Next</button>
</div>
{% endblock %}

{% block scripts %}
    <script src="{% static 'global/load_select_switching_row.js' %}"></script>
    <script src="{% static 'global/pricelist_disc.js' %}"></script>



{% endblock %}