{% extends "global/Base.html" %}
{% load staticfiles otree_tags %}

{% 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;
    }

    .payoff {
        margin: 1.5em 0;
    }
</style>
{% endblock %}

{% block scripts %}
<script src="{% static "vickrey_auction/jquery-ui/jquery-ui.min.js" %}"></script>
<script>
jQuery(document).ready(function ($) {
    var PRIVATE_VALUE = {{ player.private_value.to_number|escapejs }};

    var input = $('#id_bid_amount');

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

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

    function calculatePayoff() {
        var value = parseInt(input.val());
        var payoff = 100 + PRIVATE_VALUE;
        return payoff;
    }

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

{% block content %}

    <p>
        Your value to the object is <strong>{{ player.private_value }}</strong>.
    </p>

    <div class="form-group required">
        <label class="control-label" for="id_bid_amount">Please submit a bid for the object (from 0 to 100):</label>
        <div class="controls">
            <input type="hidden" name="bid_amount" id="id_bid_amount" value="0">
            <div class="bid-slider"></div>
            <div class="bid">Your bid: <strong><span class="bid-value"></span> points</strong></div>
            <div class="payoff">If you win the auction, you would have a payoff of <strong><span class="payoff-value"></span> points - Second highest bid</strong>.</div>
        </div>
    </div>

    {% next_button %}

    {% include Constants.instructions_template %}

{% endblock %}