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


{# ****************************************************************************************************************** #}
{# *** STYLES *** #}
{# ****************************************************************************************************************** #}
{% block styles %}
    <link href="{% static 'mpl/css/custom.css' %}" rel="stylesheet">
{% endblock %}



{# ****************************************************************************************************************** #}
{# *** SCRIPTS *** #}
{# ****************************************************************************************************************** #}
{% block scripts %}
    {% if Constants.small_pies == True %}
        <script>
            num_choices = {{ Constants.num_choices|json }};
            lottery_a_hi = "{{ lottery_a_hi }}";
            lottery_a_lo = "{{ lottery_a_lo }}";
            lottery_b_hi = "{{ lottery_b_hi }}";
            lottery_b_lo = "{{ lottery_b_lo }}";

            percentage = "{{ Constants.percentage }}";
        </script>
        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script src="{% static 'mpl/js/pie_charts.js' %}"></script>
    {% endif %}

    {% if Constants.enforce_consistency == True %}
        <script src="{% static 'mpl/js/consistency.js' %}"></script>
    {% endif %}
{% endblock %}


{# ****************************************************************************************************************** #}
{# *** CONTENT *** #}
{# ****************************************************************************************************************** #}
{% block content %}

    <div class="wrapper instructions">
        <p>
            {% blocktrans trimmed with n={{Constants.num_choices}} %}
                Vous allez devoir choisir entre des les loteries ci-dessous.
                Il s'agit à chaque fois d'un choix entre une "Option A" et une "Option B".
                Les gains associés aux deux options sont fixés pour toutes les decisions.
                Cependant, les chances d'obtenir le gain le plus élevé varient pour chaque option.
        </p>
        <p>
            Vous ne pouvez passer de l'option A à l'option B qu'une seule fois.
            Le formulaire se remplira alors automatiquement.
            Si vous changez d'avis, il faudra changer le point de bascule.
            {% endblocktrans %}
        </p>
        <p>
            {% blocktrans trimmed with n={{Constants.num_choices}} %}
                Après avoir fait votre choix, une des 10 décisions sera sélectionnée aléatoirement pour votre paiement.
                En fonction de l'option que vous aurez choisi, A ou B, votre gain sera aléatoirement déterminé selon
                les probabilités associées.
            {% endblocktrans %}
        </p>

    </div>




{# ****************************************************************************************************************** #}
{# *** CONTENT *** #}
{# ****************************************************************************************************************** #}

    <div class="wrapper">



        <!-- ------------------------------------------------------------------------------------------------------- -->
        <!-- Lottery Decisions: Choice List -->
        <!-- ------------------------------------------------------------------------------------------------------- -->

        <div class="card">
            <table class="table table-striped">
                <thead>
                    <tr class="header">
                        <th class="lottery-a">{% trans "Option A" %}</th>
                        <th class="formfield"></th>
                        <th class="lottery-b">{% trans "Option B" %}</th>
                    </tr>
                </thead>

                <tbody>
                    {% for i,f,p in choices %}
                        <tr>

                            <!-- A lotteries -->
                            <td class="lottery-a">
                                Vous pouvez gagner : <br>
                                {{ lottery_a_hi }} {% trans "avec une probabilité de " %}{{ p }},<br/>
                                {{ lottery_a_lo }} {% trans "sinon" %}
                            </td>

                            <!-- radio select form fields -->
                            <td class="formfield">
                                <input type="radio" name="{{ f }}" value="A" required>
                                <input type="radio" name="{{ f }}" value="B" required>
                            </td>

                            <!-- B lotteries -->
                            <td class="lottery-b">
                                Vous pouvez gagner : <br>
                                {{ lottery_b_hi }} {% trans "avec une probabilité de " %}{{ p }},<br/>
                                ou {{ lottery_b_lo }} {% trans "sinon " %}
                            </td>

                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

<center><button> Suivant </button> </center>

</div>

{% endblock %}