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

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

{# ****************************************************************************************************************** #}
{# *** TITLE *** #}
{# ****************************************************************************************************************** #}
{% block title %}
    {% trans "Task 1 - Results" %}
{% 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 %}

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

    <div class="wrapper instructions">

        <p >
            Thank you! That was task 1. From all your decisions in this task, the following decision from table
            {{round_to_pay}} was randomly chosen for payment:
        </p>

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

            <table id="customers" >
                <col width="450">
                <col width="50">
                <col width="450">
                <thead>
                    <tr class="header"  align="center">
                        <th class="lottery-a" > {% trans "Option A" %}</th>
                        <th> {% trans "Your Choice" %} </th>
                        <th class="lottery-b">{% trans "Option B" %}</th>

                    </tr>
                </thead>

                <tbody>

                     <tr>
                         <!-- Option A -->
                        <td align="center">

                            {{ lot_hi }}{% trans " with a probability of " %}{{ prob_hi }},<br/>
                            or <br/>
                            {{ lot_lo }} {% trans " with a probability of " %}{{ prob_lo }}<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">
                            {{ cert }} {% trans "guaranteed" %}<br/>
                        </td>
                     </tr>

                </tbody>
            </table>


        <br/>

        <!-- ------------------------------------------------------------------------------------------------------- -->
        <!-- payoff information -->
        <!-- ------------------------------------------------------------------------------------------------------- -->

            <p>
                {% if option_to_pay == 'A' %}
                {% blocktrans %}
                    As indicated above, you chose the lottery option <b>{{ option_to_pay }}</b> in this decision.
                    For the chosen option, one of the two possible outcomes has been randomly realized based
                    on the corresponding probabilities. <br>
                     Your payoff in this task equals <b>{{ payoff }}</b>, and it will be paid <b>today</b>, after the study.
                {% endblocktrans %}
                {% elif option_to_pay == 'B' %}
                {% blocktrans trimmed with payoff=payoff%}
                    As indicated above, you chose option <b>{{ option_to_pay }}</b> in this decision. <br>
                    Your payoff in this task equals <b>{{ payoff }}</b>, and it will be paid <b>today</b>, after the study.
                {% endblocktrans %}
                {% endif %}
            </p>
    {% next_button %}
    </div>

{% endblock %}