{% 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 I was selected to determine your payoff.
    </p>

    {%  if role == 'A' %}
    <p> We randomly paired you with an orange player, and selected a choice you made for them.
        Below you can see this choice.
        You chose option {{ option_chosen }}. The wheel of fortune stopped on field {{ field_stopped }}. <br>
    You earned your orange player {{ outcome_yielded }} cents.<br>
{% if bonus == 1 %}
    The orange player allocated the reward to you. <br>
    Therefore, you received a reward of <b>{{ C.max_bonus }} cents</b>.
{%  else %}
    The orange player allocated the reward to a randomly chosen blue player. <br>
    Therefore, you received a reward of  <b> 0 cents </b>.
    {%  endif %}
    </p>
    {%  else %}

 <p> We randomly paired you with a blue player, and selected a choice they made for them.
        Below you can see this choice.
        The selected blue player chose option {{ option_chosen }}.
     The wheel of fortune stopped on the {{ field_stopped }} field. <br>
    The blue player earned you {{ outcome_yielded }} cents.
 {% if bonus == 1 %}
    You allocated the reward of {{ C.max_bonus }} cents to the matched blue player.
{%  else %}
    You allocated the reward of {{ C.max_bonus }} cents to a random blue player.
    {%  endif %}
 </p>
       {% endif %}

        {% else %}

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

            {%  if role == 'A' %}
    <p> Nous vous avons apparié au hasard avec un joueur orange et sélectionné un choix que vous avez fait pour lui.
         Ci-dessous, vous pouvez voir ce choix.
         Vous avez choisi l'option {{ option_chosen }}.
La roue de la fortune s'est arrêtée sur le champ {{ field_stopped }}. <br>
     Vous avez gagné {{ outcome_yielded }} centimes pour votre joueur orange. <br>

{% if bonus == 1 %}
Le joueur orange vous a donné la récompense. <br>
     Par conséquent, vous avez reçu une récompense de <b>{{ C.max_bonus }} centimes</b>.
{%  else %}
Le joueur orange a donné la récompense à un joueur bleu choisi au hasard. <br>
     Par conséquent, vous avez reçu une récompense de <b> 0 centimes </b>.
    {%  endif %}
    </p>
    {%  else %}
 <p> Nous vous avons apparié au hasard avec un joueur bleu et sélectionné un choix qu'il a fait pour vous.
         Ci-dessous, vous pouvez voir ce choix.
         Le joueur bleu sélectionné a choisi l'option {{ option_chosen }}.
      La roue de la fortune s'est arrêtée sur le champ {{ field_stopped }}. <br>
     Le joueur bleu vous a rapporté {{ outcome_yielded }} centimes.
 {% if bonus == 1 %}
    Vous avez donné la récompense de {{ C.max_bonus }} centimes au joueur bleu associé.
{%  else %}
    Vous avez donné la récompense de {{ C.max_bonus }} centimes à un joueur bleu au hasard.
    {%  endif %}
 </p>
            {% endif %}

    {% endif %}

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

<br>
    {%  if role == 'A' %}
    {% if french == 0 %}
        <hr>
    You were allocated {{ num_lucky_bonus }} {{ b_word }} by orange players in the role of a random blue player.
    This amounts to additional reward payments of {{ add_bonus }} cents.
    {% else %}
        <hr>
    {{ num_lucky_bonus }} récompense(s) vous a été attribué par des joueurs orange dans le rôle d'un joueur bleu aléatoire.
     Cela équivaut à des paiements de récompenses supplémentaires de {{ add_bonus }} centimes.
    {% endif %}
    {%  endif %}

    <hr>
    {% if french == 0 %}
    <p>
    Your payoff from part I thus amounts to {{ payoff }} cents.
    </p>
    {% else %}
    <p>
        Votre gain de la partie I s'élève donc à {{ payoff }} centimes.
    </p>
    {% endif %}

    {% next_button %}
{% endblock %}