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


{# ****************************************************************************************************************** #}
{# *** STYLES *** #}
{# ****************************************************************************************************************** #}
{% block styles %}
<link href="{% static 'Time_Adaptive_CE_84/css/custom.css' %}" rel="stylesheet"/>
<style>
    #customers {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      border-collapse: collapse;
      width: 82%;
    }

    #customers td, #customers th {
      border: 1px solid grey;
      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>
{% 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;
        });
    });
</script>

{% endblock %}

{# ****************************************************************************************************************** #}
{# *** TITLE *** #}
{# ****************************************************************************************************************** #}
{% block title %}
{% endblock %}

{# ****************************************************************************************************************** #}
{# *** CONTENT *** #}
{# ****************************************************************************************************************** #}
{% block content %}
    {% if round_number == 1 %}
    <div align="center" style="font-family: Arial; font-size: 18px; padding: 200px;">
        {% if discount_seq == 4 %}
        <p>
            Super! <br>
            You have answered all the questions correctly. <br>
            You will now start the <b>first</b> round of alternative choices <br>
            in Task 1.
        </p>
        {% endif %}

        {% if discount_seq == 3 %}
        <p>
            Super! <br>
            You have answered all the questions correctly. <br>
            You will now start the <b>first</b> round of alternative choices <br>
            in Task 3.
        </p>
        {% endif %}

        <div align="center">
            <button name="next" class="btn btn-primary btn-large">Start</button>
        </div>
    </div>
    {% endif %}

    {% if round_number == 7 %}
    <div align="center" style="font-family: Arial; font-size: 18px; padding: 200px;">
        {% if discount_seq == 4 %}
        <p>
            You will now start the <b>second</b> round of alternative choices <br>
            in Task 1.
        </p>
        {% endif %}

        {% if discount_seq == 3 %}
        <p>
            You will now start the <b>second</b> round of alternative choices <br>
            in Task 3.
        </p>
        {% endif %}

        <div align="center">
            <button name="next"  class="btn btn-primary btn-large">Start</button>
        </div>
    </div>
    {% endif %}

    {% if round_number == 13 %}
    <div align="center" style="font-family: Arial; font-size: 18px; padding: 200px;">
        {% if discount_seq == 4 %}
        <p>
            You will now start the <b>third</b> round of alternative choices <br>
            in Task 1.
        </p>
        {% endif %}

        {% if discount_seq == 3 %}
        <p>
            You will now start the <b>third</b> round of alternative choices <br>
            in Task 3.
        </p>
        {% endif %}

        <div align="center">
            <button name="next"  class="btn btn-primary btn-large">Start</button>
        </div>
    </div>
    {% endif %}

{% if round_number == 19 %}
<div align="center" style="font-family: Arial; font-size: 18px; padding: 200px;">
    {% if discount_seq == 4 %}
    <p>
        Super!<br>
        You have answered all the questions correctly. <br>
        You will now start the <b>first</b> round of alternative choices <br>
        in Task 2.
    </p>
    {% endif %}

        {% if discount_seq == 3 %}
    <p>
        Super!<br>
        You have answered all the questions correctly. <br>
        You will now start the <b>first</b> round of alternative choices <br>
        in Task 4.
    </p>
    {% endif %}
    <div align="center">
        <button name="next"  class="btn btn-primary btn-large">Start</button>
    </div>
</div>
{% endif %}

{% if round_number == 25 %}
<div align="center" style="font-family: Arial; font-size: 18px; padding: 200px;">
    {% if discount_seq == 4 %}
    <p>
        You will now start the <b>second</b> round of alternative choices <br>
        in Task 2.
    </p>
    {% endif %}

        {% if discount_seq == 3 %}
    <p>
        You will now start the <b>second</b> round of alternative choices <br>
        in Task 4.
    </p>
    {% endif %}
    <div align="center">
        <button name="next"  class="btn btn-primary btn-large">Start</button>
    </div>
</div>
{% endif %}

{% if round_number == 31 %}
<div align="center" style="font-family: Arial; font-size: 18px; padding: 200px;">
    {% if discount_seq == 4 %}
    <p>
        You will now start the <b>third</b> round of alternative choices <br>
        in Task 2.
    </p>
    {% endif %}

        {% if discount_seq == 3 %}
    <p>
        You will now start the <b>third</b> round of alternative choices <br>
        in Task 4.
    </p>
    {% endif %}
    <div align="center">
        <button name="next"  class="btn btn-primary btn-large">Start</button>
    </div>
</div>
{% endif %}

{% endblock %}