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

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

{% block title %}
    Part 1 - Willingness to pay
{% 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>
        Please indicate the maximum amount of money (between 0 and 100 cents) 
        that you are willing to pay to get the lottery ticket: <br> 
        (The lottery ticket gives $2.00 with a 40% chance, and nothing ($0.00) with a 60% chance): <br>
        <table>
            <tr><td> {% formfield player.offer label = "" %} </td>
            <td style="vertical-align:middle"> &nbsp; cents &emsp;</td></tr>
            </table>
    </p>

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

    {% next_button %}

{% endblock %}