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

{% block title %}
    Your Choice
{% endblock %}

{% block content %}

<p>
You have to choose one and only one of the following six gambles. Each gamble has two possible outcomes (Roll High or Roll Low),
with the indicated probabilities of occurring. Your payment will be determined by which of the options you select,
and which of the outcomes occurs.
</p>
    <p>

For example, if you select Gamble 4 and Roll High occurs, your payment for this task will be 52 MU. If roll low occurs,
you will be paid 16 MU.
    </p>


<div class='subsubheader'>The Gambles</div>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 15px;
}
</style>
    <table style = "width:75%">

    <tr>
        <th>

        </th>

        <th>
            Roll
        </th>

        <th>
            Payoff
        </th>

        <th>
            Chances
        </th>
    </tr>
        <tbody>
        <tr>
            <th rowspan="2" scope="rowgroup">Gamble 1</th>
            <td> Low: </td> <td>  28 </td> <td> 50% </td>
        </tr>
        <tr>
            <td> High: </td> <td>  28 </td> <td> 50% </td>
        </tr>

        <tr>
            <th rowspan="2" scope="rowgroup">Gamble 2</th>
            <td> Low: </td> <td>  24 </td> <td> 50% </td>
        </tr>
        <tr>
            <td> High: </td> <td>  36 </td> <td> 50% </td>
        </tr>

        <tr>
            <th rowspan="2" scope="rowgroup">Gamble 3</th>
            <td> Low: </td> <td>  20 </td> <td> 50% </td>
        </tr>
        <tr>
            <td> High: </td> <td>  44 </td> <td> 50% </td>
        </tr>

        <tr>
            <th rowspan="2" scope="rowgroup">Gamble 4</th>
            <td> Low: </td> <td>  16 </td> <td> 50% </td>
        </tr>
        <tr>
            <td> High: </td> <td>  52 </td> <td> 50% </td>
        </tr>

        <tr>
            <th rowspan="2" scope="rowgroup">Gamble 5</th>
            <td> Low: </td> <td>  12 </td> <td> 50% </td>
        </tr>
        <tr>
            <td> High: </td> <td>  60 </td> <td> 50% </td>
        </tr>

        <tr>
            <th rowspan="2" scope="rowgroup">Gamble 6</th>
            <td> Low: </td> <td>  2 </td> <td> 50% </td>
        </tr>
        <tr>
            <td> High: </td> <td>  70 </td> <td> 50% </td>
        </tr>

        </tbody>

    </table>

{% formfield player.risk_choice label="Which Gamble would you like to choose?" %}


    {% next_button %}

{% endblock %}