{{ block content }}

    <div id="is-live" style="display: none">
        <p id="last-player-news"></p>
        <p>How much do you want to pass along to the next player?</p>
        <input type="number" id="value_out" min="{{ Constants.min_amount|json }}">
        <button type="button" onclick="sendOffer()">Send</button>
    </div>
    <div id="is-waiting">
        <progress></progress>
        <p>You are in the queue. Please wait for the current players to pass donations
            along the chain.</p>
    </div>



<script>
    let value_out = document.getElementById('value_out');
    let lastPlayerNews = document.getElementById('last-player-news');

    value_out.addEventListener("keydown", function (event) {
        if (event.key === "Enter") {
            sendOffer();
        }
    });

    function sendOffer() {
        if (value_out.reportValidity()) {
            liveSend({'value_out': parseInt(value_out.value)});
        }
    }

    function liveRecv(data) {
        console.log('liveRecv', data);
        if ('value_in' in data) {
            document.getElementById('is-waiting').style.display = 'none';
            document.getElementById('is-live').style.display = 'block';
            let news;
            let value_in = data.value_in;
            if (data.is_first) {
                news = `You are the first player in the chain. You automatically get ${value_in} points.`
            } else {
                news = `The previous player gave you <b>${value_in}</b> points.`
            }
            news += ` With the multiplier, this gives you an endowment of <b>${data.endowment}</b> points.`
            lastPlayerNews.innerHTML = news;
            value_out.max = data.endowment;
        }
        if ('finished' in data) {
            document.getElementById('form').submit();
        }
        if ('reload' in data) {
            liveSend({});
        }
        if ('error' in data) {
            alert(data.error);
        }
    }

    window.addEventListener('DOMContentLoaded', (event) => {
        liveSend({});
        setInterval(function () { liveSend({})}, js_vars.timeout_seconds * 1000);
    });


</script>

{{ endblock }}