{% 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;
}


        .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.
You can choose between the different options by clicking on them.
</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.
Vous pouvez choisir entre les différentes options en cliquant dessus.
Nous remplirons automatiquement les choix restants lorsque vous cliquerez sur une option.
<p>
Tous les gains possibles sont affichés en cents.
N'oubliez pas que nous sélectionnerons un participant à la fin de l'expérience.
Un choix aléatoire de ce participant sera joué pour de vrai.
Chaque choix entre une option A et B ci-dessous compte pour un choix.
</p>


    {% endif %}



<!--    <table>-->
<!--        <tr>-->
<!--        <td width="50px"> </td>-->
<!--        <td style="text-align:center; font-weight:bold;color:black"> Option A </td>-->
<!--        <td style="text-align:center; font-weight:bold;color:black"> Option B </td>-->
<!--    </tr>-->
<!--        {% for a, b, ida, idb, name, nr in zip_table %}-->
<!--    <tr >-->
<!--        <td> Nr {{nr}}:</td>-->

<!--        <td width="150px" >-->
<!--              <input type="radio" id={{ida}} name={{name}} value=1>-->
<!--              <label for={{ida}}> {{ a }} </label><br>-->
<!--         </td>-->
<!--        <td width="450px">-->
<!--            <input type="radio" id={{idb}} name={{name}} value=0>-->
<!--              <label for={{idb}}> {{ b }}  </label><br>-->
<!--        </td>-->
<!--        <td>-->
<!--            {{ formfield_errors name }}-->
<!--        </td>-->


<!--    </tr>-->

<!--    {% endfor %}-->

<!--</table>-->


<!--    <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>-->
<!--        {% for a, b, name, nr in zip_table %}-->
<!--    <tr >-->
<!--        <td> Nr {{nr}}:</td>-->

<!--        <td width="150px" >-->
<!--               {{ a }}-->
<!--         </td>-->
<!--        <td>-->
<!--            {% formfield name %}-->
<!--        </td>-->
<!--        <td width="450px">-->
<!--               {{ b }}-->
<!--        </td>-->

<!--{{ form.A_1 }}-->

<!--    </tr>-->

<!--    {% endfor %}-->

<!--</table>-->



    <table>
        <tr>
        <td width="50px"> </td>
        <td style="text-align:center; font-weight:bold;color:black"> Option A </td>
        <td style="text-align:center; font-weight:bold;color:black"> Option B </td>
    </tr>
        {% for a, b, name, nr in zip_table %}
    <tr >
        <td> Nr {{nr}}:</td>

        <td width="150px" >
               {{ a }}
         </td>
        <td>
            {% formfield name %}
        </td>
        <td width="450px">
               {{ b }}
        </td>



    </tr>

    {% endfor %}

</table>



    {% next_button %}
{% endblock %}