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

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

{% block content %}

{#    <p>In this decision, you will not complete a choice list.</p>#}
    <p>Imagine that the computer simulates an <b>urn that contains 90 balls</b>. Out of these 90 balls:
    <ul><li>30 balls are <b style="color: red">red</b></li>
        <li>60 balls are <b style="color: darkgoldenrod">yellow</b> or <b style="color: blue">blue</b>, but you <i>don't know how many</i> are yellow and how many are blue</li>
    </ul>

<p>

    The computer will <b>randomly select one</b> of these 90 balls, with equal probability. <br>
        Please choose one of the following two options:</p>
    <br>
    <table class="table table-bordered" style="border-spacing: 0">
        <colgroup>
            <col width="40%">
            <col width="15%">
            <col width="40%">
        </colgroup>
        <tr>
            <td align="center"><b>Option A</b></td>
            <td></td>
            <td align="center"><b>Option B</b></td>
        </tr>

        <tr>
                <td style="vertical-align: middle; padding-top: 20px; padding-bottom: 20px" align="center">

         {% for sum, o1, o2 in player.current_option_a %}
                <b style="color: green">&nbsp;&nbsp;Get</b>&nbsp; ${{ sum }} if the drawn ball is <b>{{ o1 }}</b><br>
             Get $0 if the drawn ball is <b>{{ o2 }}</b>

    {% endfor %}

                    <td  align="center" style="vertical-align: middle; padding-top: 20px; padding-bottom: 20px">
                    <input type="radio" name="choice" value="A"
                           required >&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
                    <input type="radio" name="choice"
                           value="B"
                           required >
                </td>
                <td align="center" style="vertical-align: middle; padding-top: 20px; padding-bottom: 20px">

                       {% for sum, o1, o2 in player.current_option_b %}
                <b style="color: green">&nbsp;&nbsp;Get</b>&nbsp; ${{ sum }} if the drawn ball is <b>{{ o1 }}</b> <br>
                       Get     $0 if the drawn ball is <b>{{ o2 }}</b>

    {% endfor %}

              </td>   </tr>

    </table>


<div style="text-align: right;">
    {% next_button %}
</div>
{% endblock %}