{% extends "global/Page.html" %}
{% load otree static %}

{% block styles %}
<style>
    #selected_2 {
background-color: #efe341;
            }

.table1 {
      border: 1px solid grey;
    text-align: center;
    width: 60%;
    alignment: center;
}
  .cantGrow {
            height: 30px !important;
        }


        .td1 {
        border: 1px solid grey;
width: 15em;
height: 4em;
}

 .td2{
     width: 22em;
 }

</style>

{% endblock %}

{% block title %}
Decision {{choice_number}}/{{number_choice}}
{% endblock %}

{% block content %}
    {% if french == 0 %}

    <p>
On this screen, we ask you to make a number of choices between an Option A and an Option B.
Each option yields different payoffs with different probabilities. All possible payoffs are displayed in cents.
    <p>
   {{text}}

</p>

    {% else %}
            <p>
Sur cet écran, nous vous demandons de faire un certain nombre de choix entre une option A et une option B.
Chaque option donne des gains différents avec des probabilités différentes. Tous les gains possibles sont affichés en cents.

<p>
    {{text}}
</p>


    {% endif %}

{% if choice_number == 1 %}

    <table>
        <tr>
        <td width="50px"> </td>
        <td style="text-align:center; font-weight:bold;color:black"> Option A </td>
            <td></td>
        <td style="text-align:center; font-weight:bold;color:black"> Option B </td>
    </tr>


    <tr >
        <td> Nr 1:</td>
        <td width="150px" align="center">
            350 avec 100%
        </td>
                <td> {{ form.A_1 }} </td>
        <td width="450px">
               1880 avec 50% de chance et 60 avec 50% de chance
        </td>
    </tr>

        <tr >
        <td> Nr 2:</td>
        <td width="150px" align="center">
            450 avec 100%
        </td>
                <td> {{ form.A_2 }} </td>
        <td width="450px">
               1880 avec 50% de chance et 60 avec 50% de chance
        </td>
    </tr>


    <tr >
        <td> Nr 3:</td>
        <td width="150px" align="center">
            550 avec 100%
        </td>
                <td> {{ form.A_3 }} </td>
        <td width="450px">
               1880 avec 50% de chance et 60 avec 50% de chance
        </td>
    </tr>

        <tr >
        <td> Nr 4:</td>
        <td width="150px" align="center">
            650 avec 100%
        </td>
                <td> {{ form.A_4 }} </td>
        <td width="450px">
               1880 avec 50% de chance et 60 avec 50% de chance
        </td>
    </tr>


    <tr >
        <td> Nr 5:</td>
        <td width="150px" align="center">
            750 avec 100%
        </td>
                <td> {{ form.A_5 }} </td>
        <td width="450px">
               1880 avec 50% de chance et 60 avec 50% de chance
        </td>
    </tr>

        <tr >
        <td> Nr 6:</td>
        <td width="150px" align="center">
            850 avec 100%
        </td>
                <td> {{ form.A_6 }} </td>
        <td width="450px">
               1880 avec 50% de chance et 60 avec 50% de chance
        </td>
    </tr>


    <tr >
        <td> Nr 7:</td>
        <td width="150px" align="center">
            950 avec 100%
        </td>
                <td> {{ form.A_7 }} </td>
        <td width="450px">
               1880 avec 50% de chance et 60 avec 50% de chance
        </td>
    </tr>

        <tr >
        <td> Nr 8:</td>
        <td width="150px" align="center">
            1050 avec 100%
        </td>
                <td> {{ form.A_8 }} </td>
        <td width="450px">
               1880 avec 50% de chance et 60 avec 50% de chance
        </td>
    </tr>


    <tr >
        <td> Nr 9:</td>
        <td width="150px" align="center">
            1150 avec 100%
        </td>
                <td> {{ form.A_9 }} </td>
        <td width="450px">
               1880 avec 50% de chance et 60 avec 50% de chance
        </td>
    </tr>

        <tr >
        <td> Nr 10:</td>
        <td width="150px" align="center">
            1250 avec 100%
        </td>
                <td> {{ form.A_10 }} </td>
        <td width="450px">
               1880 avec 50% de chance et 60 avec 50% de chance
        </td>
    </tr>


        <tr >
        <td> Nr 11:</td>
        <td width="150px" align="center">
            1350 avec 100%
        </td>
                <td> {{ form.A_11 }} </td>
        <td width="450px">
               1880 avec 50% de chance et 60 avec 50% de chance
        </td>
    </tr>


</table>


{% elif choice_number == 2 %}

    <table>
        <tr>
        <td width="50px"> </td>
        <td style="text-align:center; font-weight:bold;color:black"> Option A </td>
            <td></td>
        <td style="text-align:center; font-weight:bold;color:black"> Option B </td>
    </tr>


    <tr >
        <td> Nr 1:</td>
        <td width="150px" align="center">
            900 avec 100%
        </td>
                <td> {{ form.A_1 }} </td>
        <td width="450px">
               1100 avec 50% de chance et 400 avec 50% de chance
        </td>
    </tr>

        <tr >
        <td> Nr 2:</td>
        <td width="150px" align="center">
            900 avec 100%
        </td>
                <td> {{ form.A_2 }} </td>
        <td width="450px">
               1200 avec 50% de chance et 400 avec 50% de chance
        </td>
    </tr>


    <tr >
        <td> Nr 3:</td>
        <td width="150px" align="center">
            900 avec 100%
        </td>
                <td> {{ form.A_3 }} </td>
        <td width="450px">
               1300 avec 50% de chance et 400 avec 50% de chance
        </td>
    </tr>

        <tr >
        <td> Nr 4:</td>
        <td width="150px" align="center">
            900 avec 100%
        </td>
                <td> {{ form.A_4 }} </td>
        <td width="450px">
               1400 avec 50% de chance et 400 avec 50% de chance
        </td>
    </tr>


    <tr >
        <td> Nr 5:</td>
        <td width="150px" align="center">
            900 avec 100%
        </td>
                <td> {{ form.A_5 }} </td>
        <td width="450px">
               1500 avec 50% de chance et 400 avec 50% de chance
        </td>
    </tr>

        <tr >
        <td> Nr 6:</td>
        <td width="150px" align="center">
            900 avec 100%
        </td>
                <td> {{ form.A_6 }} </td>
        <td width="450px">
               1600 avec 50% de chance et 400 avec 50% de chance
        </td>
    </tr>


    <tr >
        <td> Nr 7:</td>
        <td width="150px" align="center">
            900 avec 100%
        </td>
                <td> {{ form.A_7 }} </td>
        <td width="450px">
               1700 avec 50% de chance et 400 avec 50% de chance
        </td>
    </tr>

        <tr >
        <td> Nr 8:</td>
        <td width="150px" align="center">
            900 avec 100%
        </td>
                <td> {{ form.A_8 }} </td>
        <td width="450px">
               1800 avec 50% de chance et 400 avec 50% de chance
        </td>
    </tr>


    <tr >
        <td> Nr 9:</td>
        <td width="150px" align="center">
            900 avec 100%
        </td>
                <td> {{ form.A_9 }} </td>
        <td width="450px">
               1900 avec 50% de chance et 400 avec 50% de chance
        </td>
    </tr>

        <tr >
        <td> Nr 10:</td>
        <td width="150px" align="center">
            900 avec 100%
        </td>
                <td> {{ form.A_10 }} </td>
        <td width="450px">
               2000 avec 50% de chance et 400 avec 50% de chance
        </td>
    </tr>


        <tr >
        <td> Nr 11:</td>
        <td width="150px" align="center">
            900 avec 100%
        </td>
                <td> {{ form.A_11 }} </td>
        <td width="450px">
               2100 avec 50% de chance et 400 avec 50% de chance
        </td>
    </tr>


</table>


{% else %}

    <table>
        <tr>
        <td width="50px"> </td>
        <td style="text-align:center; font-weight:bold;color:black"> Option A </td>
            <td></td>
        <td style="text-align:center; font-weight:bold;color:black"> Option B </td>
    </tr>


    <tr >
        <td> Nr 1:</td>
        <td width="150px" align="center">
            1000 avec 100%
        </td>
                <td> {{ form.A_1 }} </td>
        <td width="450px">
               1650 avec 50% de chance et 0 avec 50% de chance
        </td>
    </tr>

        <tr >
        <td> Nr 2:</td>
        <td width="150px" align="center">
            1000 avec 100%
        </td>
                <td> {{ form.A_2 }} </td>
        <td width="450px">
               1650 avec 50% de chance et 70 avec 50% de chance
        </td>
    </tr>


    <tr >
        <td> Nr 3:</td>
        <td width="150px" align="center">
            1000 avec 100%
        </td>
                <td> {{ form.A_3 }} </td>
        <td width="450px">
               1650 avec 50% de chance et 140 avec 50% de chance
        </td>
    </tr>

        <tr >
        <td> Nr 4:</td>
        <td width="150px" align="center">
            1000 avec 100%
        </td>
                <td> {{ form.A_4 }} </td>
        <td width="450px">
               1650 avec 50% de chance et 210 avec 50% de chance
        </td>
    </tr>


    <tr >
        <td> Nr 5:</td>
        <td width="150px" align="center">
            1000 avec 100%
        </td>
                <td> {{ form.A_5 }} </td>
        <td width="450px">
               1650 avec 50% de chance et 280 avec 50% de chance
        </td>
    </tr>

        <tr >
        <td> Nr 6:</td>
        <td width="150px" align="center">
            1000 avec 100%
        </td>
                <td> {{ form.A_6 }} </td>
        <td width="450px">
               1650 avec 50% de chance et 350 avec 50% de chance
        </td>
    </tr>


    <tr >
        <td> Nr 7:</td>
        <td width="150px" align="center">
            1000 avec 100%
        </td>
                <td> {{ form.A_7 }} </td>
        <td width="450px">
               1650 avec 50% de chance et 420 avec 50% de chance
        </td>
    </tr>

        <tr >
        <td> Nr 8:</td>
        <td width="150px" align="center">
            1000 avec 100%
        </td>
                <td> {{ form.A_8 }} </td>
        <td width="450px">
               1650 avec 50% de chance et 490 avec 50% de chance
        </td>
    </tr>


    <tr >
        <td> Nr 9:</td>
        <td width="150px" align="center">
            1000 avec 100%
        </td>
                <td> {{ form.A_9 }} </td>
        <td width="450px">
               1650 avec 50% de chance et 560 avec 50% de chance
        </td>
    </tr>

        <tr >
        <td> Nr 10:</td>
        <td width="150px" align="center">
            1000 avec 100%
        </td>
                <td> {{ form.A_10 }} </td>
        <td width="450px">
               1650 avec 50% de chance et 630 avec 50% de chance
        </td>
    </tr>


        <tr >
        <td> Nr 11:</td>
        <td width="150px" align="center">
            1000 avec 100%
        </td>
                <td> {{ form.A_11 }} </td>
        <td width="450px">
               1650 avec 50% de chance et 700 avec 50% de chance
        </td>
    </tr>


</table>

{% endif %}



    {% next_button %}
{% endblock %}