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

{% block title %}
    Auction
{% endblock %}

{% block content %}
    <p>
        The last bid by player 2 was: <span id="player_2_bid"></span> <br>
        The last bid by player 3 was: <span id="player_3_bid"></span>
    </p>
    {% if player.id_in_group == 1 %}
        <button type="button" onclick="accept_bid_p2()">Accept player 2's bid </button>
        <button type="button" onclick="accept_bid_p3()">Accept player 3's bid </button>
    {% else %}
        Make an bid: <input id="bid_input" />
        <button type="button" onclick="submit_bid()">Submit Bid</button>
    {% endif %}

{% endblock %}

{% block scripts %}
<script>
    function liveRecv(data){
        if (data["bid_accepted"]) {
            document.getElementById("form").submit();
        } else {
            if (data["id_bidder"] == 2) {
                document.getElementById("player_2_bid").innerHTML = data["bid"];
            } else {
                document.getElementById("player_3_bid").innerHTML = data["bid"];
            }
        }
    }
    function accept_bid_p2() {
        liveSend({"bid_accepted": true, "id_accepted_bid": 2});
    }
    function accept_bid_p3() {
        liveSend({"bid_accepted": true, "id_accepted_bid": 3});
    }
    function submit_bid(){
        let bid = parseFloat(document.getElementById("bid_input").value);
        liveSend({"bid_accepted": false, "bid": bid});
    }
</script>
{% endblock %}