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


     .piechart {
        margin-top: 10px;
        display: block;
        position: relative;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-image: conic-gradient(green 45deg, blue 45deg 135deg,
        red 135deg 225deg, orange 225deg 315deg, green 315deg );
    }

    body,
    .piechart {
        display: flex;
        justify-content: center;
        align-items: center;
    }

</style>

{% endblock %}

{% block title %}
    {% if french == 1 %}
    Scénario {{ player.round_number }}/{{ bonus_num_rounds }}
    {% else %}
    Scenario {{ player.round_number }}/{{ bonus_num_rounds }}
    {% endif %}

{% endblock %}

{% block content %}


       {% if french == 1 %}
<p> Le joueur bleu apparié devait choisir entre l'option A et l'option B comme indiqué ci-dessous. </p>
    {% else %}
    <p> The blue player had to choose between Option A and Option B shown below. </p>
    {% endif %}
  <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 %} {{ ff }}-{{ ft }} <br>
                    ({{ p }}%)
                </td>
            {% endfor %}
    </tr>
    <tr>
        <td class="td1">

        Option A

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

        Option B

        </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 french == 0 %}
    {% 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>
 <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={{ n_a }} value=1> <label for="a_1">I give the reward to the  <b> matched blue player</b>. </label><br>
    <input type="radio" id="a_2" name={{ n_a }} value=0> <label for="a_2">I give the reward to a <b> random blue player</b>. </label><br>
 {{ formfield_errors n_a }}
    <hr>
    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={{ n_b }} value=1> <label for="b_1">I give the reward to the  <b> matched blue player</b>. </label><br>
    <input type="radio" id="b_2" name={{ n_b }} value=0> <label for="b_2">I give the reward to a <b> random blue player</b>. </label><br>
 {{ formfield_errors n_b }}
    <hr>
</p>

{#    French #}
{#    French #}
{#    French #}

    {% else %}
    {% 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>
    <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={{ n_a }} value=1> <label for="a_1">Je donne la récompense au <b>joueur bleu apparié</b>. </label><br>
    <input type="radio" id="a_2" name={{ n_a }} value=0 > <label for="a_2">Je donne la récompense à un <b>joueur bleu au hasard</b>. </label><br>
 {{ formfield_errors n_a }}
    <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={{ n_b }} value=1> <label for="b_1">Je donne la récompense au <b>joueur bleu apparié</b>. </label><br>
    <input type="radio" id="b_2" name={{ n_b }} value=0 > <label for="b_2">Je donne la récompense à un <b>joueur bleu au hasard</b>. </label><br>
 {{ formfield_errors n_b }}
    <hr>
</p>

{% endif %}


    {% next_button %}
{% endblock %}