{{ block title }}
Trade
{{ endblock }}
{{ block content }}

<div style="background-color: green; border-radius: 10px;">
    <p id="news" style="margin: 10px;"></p>
</div>

<table class="table">
    <tr>
        <td>Your role</td>
        <th>
            {{ if player.is_buyer }}buyer{{ else }}seller{{ endif }}
        </th>
    </tr>
    <tr>
        <td>
            Your break-even point
            {{ if player.is_buyer }}
                (you should buy for less than)
            {{ else }}
                (you should sell for more than)
            {{ endif }}
        </td>
        <th>
            {{ player.break_even_point }}
        </th>
    </tr>
    <tr>
        <td>Items in your possession</td>
        <th id="num_items"></th>
    </tr>
    <tr>
        <td>Your current offer</td>
        <th id="current_offer"></th>
    </tr>
    <tr>
        <td>Profits</td>
        <th id="payoff"></th>
    </tr>
</table>

<h2>Trading Mask</h2>
Your Offer is only allowed if it is between 420 Points and 310 Points! <br>
<input type="number" id="my_offer">
<button type="button" onclick="sendOffer()" id="btn-offer">Make offer</button>
<br><br>
<div class="container">
    <div class="row">
        <div class="col-sm">
            <h4>Bids</h4>
            <table id="bids_table"></table>
        </div>
        <div class="col-sm">
            <h4>Asks</h4>
            <table id="asks_table"></table>
        </div>
    </div>
</div>


<br><br>
<h2>Market Price</h2>
{{ include 'auction_app/chart.html' }}

<!-- <br><br>
<h2>Chat</h2>
{{ if player.is_buyer }}
    {{ chat nickname="Buyer" }}
{{ else }}
    {{ chat nickname="Seller" }}
{{ endif }} -->


<script>

    let bids_table = document.getElementById('bids_table');
    let asks_table = document.getElementById('asks_table');
    let my_id = js_vars.id_in_group;
    let news_div = document.getElementById('news');
    let is_buyer = js_vars.is_buyer;
    let btnOffer = document.getElementById('btn-offer');
    let my_offer = document.getElementById('my_offer');

    function showNews(msg) {
        news_div.innerText = msg;
        setTimeout(function () {
            news_div.innerText = ''
        }, 10000)
    }

    function cu(amount) {
        return `${amount} points`;
    }

    function liveRecv(data) {
        console.log(data)
        // javascript destructuring assignment
        let {bids, asks, highcharts_series, num_items, current_offer, payoff, news} = data;
        if (news) {
            let {buyer, seller, price} = news;
            if (buyer === my_id) {
                showNews(`You bought from player ${seller} for ${cu(price)}`);
            } else if (seller === my_id) {
                showNews(`You sold to player ${buyer} for ${cu(price)}`);
            }
        }
        document.getElementById('num_items').innerText = num_items;
        document.getElementById('current_offer').innerText = cu(current_offer);
        document.getElementById('payoff').innerText = cu(payoff);
        if (!is_buyer && num_items === 0) {
            btnOffer.disabled = true;
        }
        if (is_buyer && num_items === 1) {
            btnOffer.disabled = true;
        }
        bids_table.innerHTML = bids.map(e => `<tr><td>${cu(e)}</td></tr>`).join('');
        asks_table.innerHTML = asks.map(e => `<tr><td>${cu(e)}</td></tr>`).join('');
        redrawChart(highcharts_series);
    }

    function sendOffer() {
        liveSend({'offer': my_offer.value})
    }

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

    document.addEventListener('DOMContentLoaded', (event) => {
        liveSend({});
    });
</script>

{{ endblock }}