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

<p id="news" style="color: green"></p>

<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>

<table class="table">
    <tr>
        <td>Assets</td>
        <th id="num_items"></th>
    </tr>
    <tr>
        <td>Dividends</td>
        <th id="dividend"></th>
    </tr>
    <tr>
        <td>Total ECU</td>
        <th id="payoff"></th>
    </tr>
</table>

<br><br>

<input type="number" id="my_sell">
<button type="button" id="btn-sell">Sell</button>

<input type="number" id="my_buy">
<button type="button" id="btn-buy">Buy</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>
{{ include 'double_auction/chart.html' }}

<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 is_seller = js_vars.is_seller;
    let btnBuy = document.getElementById('btn-buy');
    let my_buy = document.getElementById('my_buy');
    let btnSell = document.getElementById('btn-sell');
    let my_sell = document.getElementById('my_sell');

    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, curent_price, 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('current_price').innerText = cu(current_price);
        document.getElementById('payoff').innerText = cu(payoff);
       if (num_items === 0) {
           btnSell.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);
    }

    <script>
    // ... Your existing JavaScript code ...

    function sendBuyOffer() {
        let myBuyInput = document.getElementById('my_buy');
        let buyOfferValue = myBuyInput.value;
        liveSend({'buy_offer': buyOfferValue});
    }

    function sendSellOffer() {
        let mySellInput = document.getElementById('my_sell');
        let sellOfferValue = mySellInput.value;
        liveSend({'sell_offer': sellOfferValue});
    }

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

    // Attach click event listeners to the buttons
    document.getElementById('btn-buy').addEventListener('click', sendBuyOffer);
    document.getElementById('btn-sell').addEventListener('click', sendSellOffer);
</script>

{{ endblock }}