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

{% block title %}
   Lottery {{round    }} of {{num_questions}} <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.right_side_amounts1 %}

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


   {% if type == 'list' %}

    <td style="vertical-align: middle; text-align: center" rowspan="{{table_length1}}">
{% for prob, sum in player.current_lottery %}
                   With probability <b>{{ prob }}% : </b>
                    {% if sum  >= 0 %}
                     <b style="color: green">&nbsp;&nbsp;Get</b>&nbsp;
                   {% elif sum < 0 %}
                     <b style="color: red;">&nbsp;&nbsp;Lose</b>&nbsp;
                    {% endif %}
                  <b>$ {{ sum | abs }}</b> <br><br>
    {% endfor %}
    </td>

{%  elif type == 'rocl' %}
   <td  style="vertical-align: middle; text-align: left" rowspan="{{table_length1}}">
   <p>We roll a fair four-sided dice with numbers 20, 40, 60, 80</p>
    {% for roll, prob1, sum1, prob2, sum2 in player.current_lottery %}
        If dice comes up {{ roll }}:<br><br>
        <ul>
        <li>
          With probability <b>{{ prob1 }}% : </b>   <b style="color: green;">&nbsp;&nbsp;Get</b>&nbsp;  <b>$ {{ sum1 | abs }}</b><br><br>
        </li>
        <li>
         With probability <b>{{ prob2 }}% : </b>    <b style="color: green;">&nbsp;&nbsp;sGet</b>&nbsp;  <b>$ {{ sum2 | abs }}</b>
        </li>
        </ul>
    {%  endfor %}
         </td>

{%  endif %}

                  </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">
                     With certainty: <b style="color: green">&nbsp;&nbsp;Get</b>&nbsp;
                    <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">
                    With certainty: <b style="color: green">&nbsp;&nbsp;Get</b>&nbsp;
                    <b>$ {{ amount | abs }} &nbsp;</b>
                </td>
            </tr>
{% endif %}
{% endfor %}
    </table>

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

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

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



{% endblock %}