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

{% block title %}
Task {{ round }} of {{ num_questions }} <hr>
{% endblock %}

{% block content %}
    <!--<p>In each of the rows below please indicate whether you prefer Option A or Option B.</p>-->

    {% if player.endowment > 0 %}    <p><b>Your budget for this decision is {{ endowment }}.</b></p> {% endif %}

    <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, absamount 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, abssum in current_lottery %}
                   With probability <b>{{ prob }}% : </b>
                    {% if sum  > 0 %}
                     <b style="color: green">Get</b>
                   {% elif sum < 0 %}
                     <b style="color: red">Lose</b>
                  {% elif sum == 0 and player.lottery_amount > 0 %}
                     <b>Get</b>
                  {% elif sum == 0 and player.lottery_amount < 0 %}
                     <b>Lose</b>
                    {% endif %}
                  <b>$ {{ abssum }}</b> <br><br>
    {% endfor %}
    </td>

{%  elif type == 'rocl' %}
    <td style="vertical-align: middle; text-align: left" rowspan="{{table_length1}}">
        <p>We randomly <b>draw an integer number between  {{ roclrangestart }} and {{ roclrangeend }}</b>. Call this number X.</p>
 {% for prob, sum, abssum in current_lottery %}
                   With probability <b>{{ prob }}% : </b>
                    {% if sum  > 0 %}
                     <b style="color: green">Get</b>
                   {% elif sum < 0 %}
                     <b style="color: red">Lose</b>
                  {% elif sum == 0 and player.lottery_amount > 0 %}
                     <b>Get</b>
                  {% elif sum == 0 and player.lottery_amount < 0 %}
                     <b>Lose</b>
                    {% endif %}
                  <b>$ {{ abssum }}</b> <br><br>
    {% endfor %}

    </td>

    {%  elif type == 'complex_prob' %}
    <td style="vertical-align: middle; text-align: left" rowspan="{{table_length1}}">
      {% for prob, sum, abssum in current_lottery %}
      <div style="float:left;left:20%;width:90%;text-align:left;margin-left:10%">
        With probability: <br>
	<b>{{ prob }}% : </b> <br>
                    {% if sum  > 0 %}
                     <b style="color: green;">Get</b>
                   {% elif sum < 0 %}
                     <b style="color: red;">Lose</b>
                  {% elif sum == 0 and player.lottery_amount > 0 %}
                     <b>Get</b>
                  {% elif sum == 0 and player.lottery_amount < 0 %}
                     <b>Lose</b>
                    {% endif %}
                     <b>$ {{ abssum }}</b> <br><br>
		     </div>
    {% endfor %}

</td>

{%  elif type == 'complex_amt' %}
    <td style="vertical-align: middle; text-align: left;" rowspan="{{table_length1}}">
      {% for prob, sum, abssum in current_lottery %}
      <div style="float:left;left:20%;width:80%;text-align:left;margin-left:10%;margin-right:7%">
                   With probability  <b>{{ prob }}% : </b> <br>
                   <b style="color: green;">Get</b>
		    <b style="font-size:16px;">$ {{ sum }}</b> <br><br>
		     </div>
    {% 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">
                    {%  if amount > 0 %}
                    With certainty: <b style="color: green">Get</b>
                        {%  elif amount < 0  %}
                    With certainty: <b style="color: red">Lose</b>
                          {% elif amount == 0 and player.lottery_amount > 0 %}
                    With certainty: <b>Get</b>
                  {% elif amount == 0 and player.lottery_amount < 0 %}
                    With certainty: <b>Lose</b>
                        {%  endif %}

                    <b>$ {{ absamount }} </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">Get</b>
          {%  elif amount < 0  %}
                    With certainty: <b style="color: red">Lose</b>
                          {% elif amount == 0 and player.lottery_amount > 0 %}
                    With certainty: <b>Get</b>
                  {% elif amount == 0 and player.lottery_amount < 0 %}
                    With certainty: <b>Lose</b>
                        {%  endif %}                    <b>$ {{ absamount }} </b>
                </td>
            </tr>
{% endif %}
{% endfor %}
    </table>

<!--    {{ form.errors }} -->
    <input type="hidden" name="switching_point" id="switching_point">

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

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



{% endblock %}