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

    <p> We randomly paired you with an orange player, and selected a scenario for which they made a bonus decision.
        Below you can see the scenario.
        In the scenario, the wheel of fortune stopped on a field between {{ stopped_from }} and {{ stopped_to }}.
        The matched blue player chose option {{ option_chosen }}. <p>

        {% if bonus == 1 %}
        In this scenario, the orange player gave the bonus to the matched blue player.<br>
{%  else %}
        In this scenario, the orange player did not give the bonus to the matched blue player. <br>
    {%  endif %}
    Your guess for the selected scenario is: {{guess}}. <br>
        {% if prize == 1 %}
        You won the prize of 1500 cents.
        {% else %}
        You did not win the prize of 1500 cents.
        {% endif %}
    </p>


<b> The selected Task:</b>
    <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>

  {% if treatment == 'OB' %}
The wheel of fortune stopped on a field between {{ stopped_from }} and {{ stopped_to }}. In this case, option A yields a payoff
   of  {{outcome_A}} cents and option B yields a payoff of {{outcome_B}} cents. <br>
    {% endif %}
Do you want to give the reward of {{ C.max_bonus }} cents to the bue player or to a randomly selected participant?
<br>
   {% if checked_A == 'checked' %}
    <hr>
    The blue player chose <b> option A </b> {% if treatment == 'OB' %} and earned you <b> {{outcome_A}} cents</b>{% endif %}. <br>
    <input type="radio" id="a_1" name="sepp" value=1 disabled {{checked_r}} ><label for="a_1"   >I give the reward to the  <b> matched blue player</b>. </label><br>
    <input type="radio" id="a_2" name="max" value=0 disabled> {{checked_nr}} <label for="a_2"   >I give the reward to a <b> random blue player</b>. </label><br>
    <hr>
    {% else %}
    The blue player chose <b> option B </b> {% if treatment == 'OB' %} and earned you <b> {{outcome_B}} cents</b>{% endif %}. <br>
    <input type="radio" id="b_1" name="lisl" value=1 disabled {{checked_r}} ><label for="b_1"   >I give the reward to the  <b> matched blue player</b>. </label><br>
    <input type="radio" id="b_2" name="anna-maria" value=0 disabled {{checked_nr}} > <label for="b_2" >I give the reward to a <b> random blue player</b>. </label><br>
    <hr>
    {% endif %}

</div>

</p>
    </p>


{% else %}

    <p>
        La partie II a été sélectionnée pour déterminer votre gain.    </p>

    <p> Nous avons choisi un scénario au hasard.
         Ci-dessous, vous pouvez voir le scénario.
        Dans le scénario, la roue de la fortune s'est arrêtée sur un champ entre {{stopped_from}} et {{stopped_to}}.
        Le joueur bleu correspondant choisit l'option {{ option_chosen }}. <p>
        Votre supposition pour le scénario sélectionné est: {{guess}}/100 <br>
        {% if prize == 1 %}
        Vous avez gagné le prix de 1500 centimes.
        {% else %}
        Vous n'avez pas gagné le prix de 1500 centimes.
        {% endif %}
    </p>


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

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



  {% if treatment == 'OB' %}
La roue de la fortune s'est arrêtée sur un champ entre {{stopped_from}} et {{stopped_to}}. Dans ce cas, l'option A
        rapporte un gain de {{outcome_A}} centimes et l'option B rapporte un gain de {{outcome_B}} centimes. <br>
    {% endif %}
Voulez-vous donner la récompense de {{ C.max_bonus }} centimes au joueur bleu ou à un participant
        sélectionné au hasard?<br>
   {% if checked_A == 'checked' %}
    <hr>
    Le joueur bleu a choisi <b> l'option A </b> {% if treatment == 'OB' %} et vous a fait gagner  <b> {{outcome_A}} centimes</b>{% endif %}. <br>
    <input type="radio" id="a_1" name="sepp" value=1 disabled {{checked_r}} ><label for="a_1">Je donne la récompense au <b>joueur bleu apparié</b>. </label><br>
    <input type="radio" id="a_2" name="max" value=0 disabled {{checked_nr}} ><label for="a_2">Je donne la récompense à un <b>joueur bleu au hasard</b>. </label><br>
    <hr>
    {% else %}
        <hr>
    Le joueur bleu a choisi <b> l'option B </b> {% if treatment == 'OB' %} et vous a fait gagner  <b> {{outcome_B}} centimes</b>{% endif %}. <br>
    <input type="radio" id="b_1" name="lisl" value=1 disabled {{checked_r}} ><label for="b_1">Je donne la récompense au <b>joueur bleu apparié</b>. </label><br>
    <input type="radio" id="b_2" name="anna-maria" value=0 disabled {{checked_nr}} > <label for="b_2">Je donne la récompense à un <b>joueur bleu au hasard</b>. </label><br>
    <hr>
    {% endif %}





</div>

    {% endif %}






    {% next_button %}
{% endblock %}