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

{% block styles %}
<style>
    #selected_2 {
background-color: #efe341;
            }

.table1 {
      border: 1px solid grey;
    text-align: center;
    width: 70%;
    alignment: center;
}


        .td1 {
        border: 1px solid grey;
width: 15em;
height: 4em;
}

 .td2{
     width: 22em;
 }

</style>

{% endblock %}

{% block title %}
    {% if french == 1 %}
    Décision {{ choice_number }}/{{number_choice}}
    {% else %}
    Decision {{ choice_number }}/{{number_choice}}
    {% endif %}

{% endblock %}

{% block content %}
    {% if french == 1 %}
    <p> Quelle option préférez-vous?
    {% else %}
<p> Which option do you prefer?
    {% endif %}
</p>
  <table class="table1">
        <tr>
        <td class="td1">
        </td>
            {% for ff, ft, p in fields %}
                 <td class="td1" align="center">
                {% if french == 0 %} Fields {% else %} Champs {% endif %}{{ ff }}-{{ ft }}
                    <br>
                    ({{ p }}%)
                </td>
            {% endfor %}
    </tr>
    <tr>
        <td class="td1">

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

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

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

        </td>
            {% for o,ff in oo_2 %}
                <td class="td1">
                {{ o }}
                </td>
            {% endfor %}
    </tr>


    </table>

<br>

    {% next_button %}
{% endblock %}