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

{% block styles %}
    <link href="{% static 'global/empty.css' %}" rel="stylesheet">
{% endblock %}

{% block title %}
    Part 1 - Results
{% endblock %}

{% block content %}

<style>
    .otree-timer {
        display: none;
    }
    p.time {
      background-color: white;
      color: grey;
      text-align: right;
    }
</style>

<script>
    $(function () {
        $('.otree-timer__time-left').on('update.countdown', function (event) {
            if (event.offset.totalSeconds === 25) {
                $('.otree-timer').show();
            }
        });
    });
</script>

    <p class="time">
        Time: {{ time }} seconds. 
    </p>

    <p>
        The randomly drawn price for the lottery ticket is {{ player.info_value }} cents. 
    </P>
    
    <p>
        The maximum amount of money you are willing to pay is {{ player.offer }} cents,
        which is
        {% if player.offer >= player.info_value %}
        <b>higher</b> than (or equal to) 
        {% else %}
        <b>lower</b> than 
        {% endif %}
        the randomly drawn price.
    </p>

    <P>
        Hence, {% if player.offer >= player.info_value %}
        <b> {{ player.info_value }} cents 
        {% else %}
        <b> no money 
        {% endif %}
        will be deducted</b> from your completion payment, 
        {% if player.offer >= player.info_value %}
        and you <b> get the lottery ticket</b>.<br>
        <br> The outcome of the lottery will be determined at the end of the study
        with the following procedure:
        The computer program will draw a random number between 1 and 10. 
        If that number is equal or lower than 4, the lottery ticket pays $2.00, otherwise nothing ($0.00). 
        {% else %}
        and you <b>do not get the lottery ticket</b>.
        {% endif %} 
         
    </P>

    <p>
        Please click "Next" to continue. 
    </p>

    {% next_button %}

{% endblock %}