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

{% block styles %}
<style>
    .selected {
background-color: #efe341;
         border: 1px solid grey;
width: 15em;
height: 4em;
            }

.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 %}
    {% if french == 0 %} Your Payoff{% else %} Votre Paiement {% endif %}
{% endblock %}

{% block content %}


{% if french == 0 %}

    <p>
        Part II was selected to determine your payoff.
        <p>


The choice task below was randomly selected to determine your payment from the experiment.
    </p>

{% else %}
<p>
         La partie II a été sélectionnée pour déterminer votre gain.
    <p>
    La tâche ci-dessous a été sélectionnée au hasard pour déterminer votre paiement à partir de l'expérience.
</p>

{% endif %}


    {% if task_type == 'FOSD' %}
{% if french == 0 %}
<p>
        You chose option {{ option_chosen }}. The wheel of fortune stopped on field {{ field_stopped }}. <br>
    You earned an additional payoff of {{ outcome_yielded }} cents.
</p>

<b> The selected Task </b>

{% else %}
<p>
       Vous avez choisi l'option {{ option_chosen }}. La roue de la fortune s'est arrêtée sur le champ {{ field_stopped }}.
     Vous avez donc gagné un gain supplémentaire de {{ outcome_yielded }} centimes.
</p>

<b> La tâche sélectionnée </b>

{% endif %}


    <div style="border:3px; border-style:solid; border-color:#130e0e; padding: 1em;">

          <table class="table1">
        <tr>
        <td class="td1">
        </td>
            {% for ff, ft, p in fields %}
                 <td  align="center" {% if stopped_from == ff  %}
                    class="selected"
                      {% else %}
                      class="td1"
                    {% endif %}>
                     {% if french == 0 %} Fields {% else %} Champs {% endif %} <br> {{ ff }} -{{ ft }}
                    <br>
                    ({{ p }}%)
                </td>
            {% endfor %}
    </tr>
    <tr>
        <td class="td1">

         <input type="radio" id="A" name="choice_s" disabled {{ checked_A }} >
        <label for="A">Option A </label><br>

        </td>
            {% for o, ff in oo_1 %}
                                 <td  align="center" {% if stopped_from == ff  %}
                    class="selected"
                      {% else %}
                      class="td1"
                    {% endif %}>
                {{ o }}
                </td>
            {% endfor %}
    </tr>
        <tr>
        <td>

        <input type="radio" id="B" name="choice_s" disabled {{ checked_B }} >
        <label for="B">Option B </label><br>

        </td>
            {% for o,ff in oo_2 %}
                                 <td  align="center" {% if stopped_from == ff  %}
                    class="selected"
                      {% else %}
                      class="td1"
                    {% endif %}>
                {{ o }}
                </td>
            {% endfor %}
    </tr>


    </table>
    </div>





{% else %}

 {% if french == 0 %}
    Option B yielded a payoff of {{payoff_b}}<br>
You chose option {{ option_chosen }} and received an additional payoff of {{ payoff_hl }}.
    {% else %}
<p>

Vous avez choisi l'option {{ option_chosen }} et avez reçu un gain supplémentaire de {{ payoff_hl }}.
    </p>
    {% endif %}

<b> La tâche sélectionnée:</b>

    <div style="border:3px; border-style:solid; border-color:#130e0e; padding: 1em;">


        <table>
        <tr>
        <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>
    <tr >

        <td>
              <input type="checkbox" id="ida" {{ checked_left }} disabled >
              <label for="ida"> {{ text_a }} </label><br>
         </td>
        <td>
            <input type="checkbox" id="idb" {{ checked_right }} disabled >
              <label for="idb"> {{ text_b }} </label><br>
        </td>

    </tr>

</table>
    </div>


















{% endif %}


<br>

    {% next_button %}
{% endblock %}