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

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

{# ****************************************************************************************************************** #}
{# *** SCRIPTS *** #}
{# ****************************************************************************************************************** #}
{% block scripts %}
    <script type="text/javascript">
        // Pressing enter does not submit the form.
        $(document).ready(function() {
            $(window).keydown(function(event){
                if ((event.keyCode == 13) || (event.keyCode == 32)){
                event.preventDefault();
                return false;
               }
            });
        });

        // Disable right click
        $(document).ready(function(){
            document.oncontextmenu = function() {return false;};
            $(document).mousedown(function(e){
                if( e.button == 2 ) {
                    //window.location.reload();
                    return false;
                }
                return true;
            });
        });

        // Disable ctrl + r  and F5
        function disableF5(e) { if ((e.which || e.keyCode) == 116 || (e.keyCode == 82 && e.ctrlKey) || (e.keyCode == 82 && e.metaKey)) e.preventDefault(); };
        $(document).ready(function(){
             $(document).on("keydown", disableF5);
        });
    </script>
{% endblock %}

{# ****************************************************************************************************************** #}
{# *** TITLE *** #}
{# ****************************************************************************************************************** #}
{% block title %}
    {% trans "Partie 3 - Résultats" %}
{% endblock %}



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

    <div class="wrapper instructions">


        <style>
            #customers {
              font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
              border-collapse: collapse;
              width: 100%;
            }

            #customers td, #customers th {
              border: 1px solid #ddd;
              padding: 8px;
            }

            #customers tr:nth-child(even){background-color: #f2f2f2;}

            #customers th {
              padding-top: 12px;
              padding-bottom: 12px;
              text-align: center;
              background-color: #808080;
              color: white;
            }
         </style>

            {% if selected == 0 %}
            <div class="wrapper">
                <p>

                    {% blocktrans %}
                        Malheureusement, vous n’avez pas été choisi-e pour le paiement. Par conséquent, vous ne
                    recevez aucun paiement dans cette partie.
                    {% endblocktrans %}

                </p>

            </div>
            {% endif %}

            {% if selected == 1 %}
            <table id="customers" >
                <col width="450">
                <col width="50">
                <col width="450">
                <thead>
                    <tr class="header" align="center">
                        <th> Urne A <br/>
                            50 boules vertes, 50 boules bleues </th>
                        <th> {% trans "Your Choice" %} </th>
                        <th> Urne B <br/>
                            ? boules vertes, ? boules bleues </th>
                    </tr>
                </thead>

                <tbody>

                     <tr>
                         <!-- Option A -->
                        <td  align="center" >
                            {{ high_a }} {% trans "si la boule est de la  Couleur de Victoire" %} <br/>
                            {% trans " ou " %} <br/>
                            {{ low_a }} {% trans "sinon" %} <br/>
                        </td>

                         <!-- radio select form fields -->
                        <td class="formfield" align="center">
                            {% if option_to_pay == 'A' %}
                                <div class="controls">
                                    <input type="radio" style="pointer-events: none;" checked="checked">
                                    <input type="radio" style="pointer-events: none;">
                                </div>
                            {% elif option_to_pay == 'B' %}
                                <div class="controls">
                                    <input type="radio" style="pointer-events: none;">
                                    <input type="radio" style="pointer-events: none;" checked="checked">
                                </div>
                            {% endif %}
                        </td>

                        <!-- Option B -->
                        <td align="center">

                            {{ high_b }} {% trans "si la boule est de la Couleur de Victoire" %} <br/>
                            {% trans " ou " %} <br/>
                            {{ low_b }} {% trans "sinon" %} <br/>

                        </td>
                     </tr>

                </tbody>
            </table>
            {% endif %}
        </div>

        <br/>

        <!-- ------------------------------------------------------------------------------------------------------- -->
        <!-- payoff information -->
        <!-- ------------------------------------------------------------------------------------------------------- -->
        <div>
            <p>
                {% if option_to_pay == 'A' %}
                    {% if payoff > 0 %}
                        {% blocktrans %}
                            Comme indiqué ci-dessus, vous avez choisi <b>{{success_color}}</b> comme couleur de
                            victoire et vous avez choisi de tirer une balle de l’urne <b>{{ option_to_pay }}</b> dans
                            la décision sélectionnée. <br>
                            Il y avait 50 boules vertes et 50 boules bleues dans l’urne </b>{{option_to_pay}}</b> et vous avez
                            eu de la chance car la boule qui a été tirée était {{ball_color}}!  <br>
                            Par conséquent, votre gain dans cette tâche est égal à <b>{{ payoff }}</b>.
                        {% endblocktrans %}
                    {% endif %}
                    {% if payoff == 0 %}
                        {% blocktrans %}
                            Comme indiqué ci-dessus, vous avez choisi <b>{{success_color}}</b> comme couleur de succès et
                            vous avez choisi de tirer une balle de l’urne <b>{{ option_to_pay }}</b> dans la décision
                            sélectionnée. <br>
                            Il y avait 50 boules vertes et 50 boules bleues dans l’urne </b>{{option_to_pay}}</b> mais
                            malheureusement vous n’avez pas eu de chance.
                            La balle qui a été tirée était {{ball_color}}!  <br>
                            Par conséquent, votre gain dans cette tâche est égal à <b>{{ payoff }}</b>.
                        {% endblocktrans %}
                    {% endif %}
                {% elif option_to_pay == 'B' %}
                    {% if payoff > 0 %}
                        {% blocktrans %}
                            Comme indiqué ci-dessus, vous avez choisi <b>{{success_color}}</b> comme couleur de
                            victoire et vous avez choisi de tirer une balle de l’urne <b>{{ option_to_pay }}</b> dans
                            la décision sélectionnée. <br>
                            Il y avait {{green}} boules vertes et {{blue}} boules bleues dans l’urne </b>{{option_to_pay}}</b> et vous avez
                            eu de la chance car la boule qui a été tirée était {{ball_color}}!! <br>
                            Par conséquent, votre gain dans cette tâche est égal à <b>{{ payoff }}</b>.
                        {% endblocktrans %}
                    {% endif %}
                    {% if payoff == 0 %}
                        {% blocktrans %}
                            Comme indiqué ci-dessus, vous avez choisi <b>{{success_color}}</b> comme couleur de
                            victoire et vous avez choisi de tirer une balle de l’urne <b>{{ option_to_pay }}</b> dans
                            la décision sélectionnée. <br>
                            Il y avait {{green}} boules vertes et {{blue}} boules bleues dans l’urne </b>{{option_to_pay}}</b> mais
                            malheureusement vous n’avez pas eu de chance.
                            La balle qui a été tirée était {{ball_color}}! <br>
                            Par conséquent, votre gain dans cette tâche est égal à <b>{{ payoff }}</b>.
                        {% endblocktrans %}
                    {% endif %}
                {% endif %}
            </p>

        </div>

    </div>
    <div align="center">
    <button name="next" id="next1" class="btn btn-primary btn-large">Suivant</button>
    </div>
{% endblock %}