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

{% block title %}
    Part 2 - Price determination.
{% 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 to see another
        team member's 
        guess is {{ player.info_value }} cents.<br>
        <br>
        The maximum amount of money you were 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.<br>
        <br>
        {% if player.offer >= player.info_value %}
            Hence, the price of <b>{{ player.info_value }} cents will be deducted from your completion payment</b> 
            and you will 
            <b>see another
               team member's 
               guess</b>.  
        {% else %}
            Hence, <b>no money will be deducted from your completion payment </b>
            but you will 
            <b>not see another
               team member's 
               guess</b>.  
        {% endif %}        
        </p>

        
        <P>
            Please, click "Next" to continue.
        </P>
    

    {% next_button %}

{% endblock %}