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

{% block title %}
    Bid
{% endblock %}

{% block styles %}
<link href="{% static "vickrey_auction/jquery-ui/jquery-ui.min.css" %}" rel="stylesheet">
<style type="text/css">
    .bid-slider {
        margin: 1.5em auto;
        width: 70%;
    }

    .bid {
        text-align: center;
    }

</style>
{% endblock %}


{% block content %}

    <p>
        Your valuation is <strong>{{ player.value_item }}</strong>.
    </p>

    {% formfield player.bid_amount label="Please enter an amount from 0 to 100:" %}
    
    <p>
    {% next_button %}

   

{% endblock %}


{% block scripts %}
<script src="{% static "vickrey_auction/jquery-ui/jquery-ui.min.js" %}"></script>
<script>
jQuery(document).ready(function ($) {
    var input = $('#id_bid_amount');

    $('.bid-slider').slider({
        min: 0,
        max: {{ Constants.endowment|json }},
        slide: function (event, ui) {
            input.val(ui.value);
            updateBidValue();
        },
    });

    function updateBidValue() {
        $('.bid-value').text(input.val());
    }

    updateBidValue();
});
</script>
{% endblock %}