{{ block title }}
    Trading is live.

{{ endblock }}
{{ block content }}

<table class="table">
    <tr>
        <td>The current price is </td>
        <th id="current_price">50</th>
    </tr>
    <tr>
        <td>You can buy at </td>
        <th id="buy_price">53</th>
    </tr>
    <tr>
        <td>You can sell at </td>
        <th id="sell_price">47</th>
    </tr>
</table>

    <div id="is_forecaster" style="display: none">
        <p>Move the slider to decide how to split your investment.</p>

        <input type="range" name="invest" min="0" max="100" oninput="updateDescription(this)">
        <p id="description"></p>

        <script>
            let description = document.getElementById('description');
            function updateDescription(input){
                let invest = parseInt(input.value);
                let remainder = 100 - invest;
                description.innerText = `Invest ${invest} in Black and invest ${remainder} in White. You estimate a ${invest}% probability of Black occurring and a ${remainder}% probability of White occurring.`
            }
        </script>
    </div>



    <div id="is_trader" style="display: none">
        Your signal is: {{ player.signal }}
        <br>
        Your tag is:
        <h4 style="color:{{ player.colour }}">{{ player.colour }} </h4>
        <table class="table">
            <tr>
                <td>Your asset share position</td>
                <th id="num_shares_in_possession"> 4</th>
            </tr>
                <tr>
                <td>Your balance is</td>
                <th id="balance"> 400</th>
            </tr>

            <tr>
                <td>Amount set aside to cover your short position</td>
                <th id="escrow_amount"> 0</th>
            </tr>
        </table>

        <button type="button" onclick="buy_one()"> BUY </button>
        <button type="button" onclick="sell_one()"> SELL </button>
    </div>

    <div id="is_manipulator" style="display: none">
        <h4> The asset state is: {{ subsession.asset_state }} </h4>
        Your tags are:
        <h4 style="color:{{ subsession.manipulator_colour1 }}">{{ subsession.manipulator_colour1 }} </h4>
        <h4 style="color:{{ subsession.manipulator_colour2 }}">{{ subsession.manipulator_colour2 }} </h4>
        <table class="table">
            <tr>
                <td>Your <label style="color:{{subsession.manipulator_colour1}}">{{subsession.manipulator_colour1}}</label> asset share position</td>
                <th id="manipulator_asset_balance_colour1"> 4</th>
            </tr>
            <tr>
                <td>Your <label style="color:{{subsession.manipulator_colour1}}">{{subsession.manipulator_colour1}}</label> balance is</td>
                <th id="manipulator_balance_colour1"> 400</th>
            </tr>
            <tr>
                <td>Amount set aside to cover your <label style="color:{{subsession.manipulator_colour1}}">{{subsession.manipulator_colour1}}</label> short position</td>
                <th id="manipulator_escrow_amount1"> 0</th>
            </tr>

            <tr>
                <td>Your <label style="color:{{subsession.manipulator_colour2}}">{{subsession.manipulator_colour2}}</label> asset share position</td>
                <th id="manipulator_asset_balance_colour2"> 4</th>
            </tr>

            <tr>
                <td>Your <label style="color:{{subsession.manipulator_colour2}}">{{subsession.manipulator_colour2}}</label> balance is</td>
                <th id="manipulator_balance_colour2"> 400</th>
            </tr>
            <tr>
                <td>Amount set aside to cover your <label style="color:{{subsession.manipulator_colour2}}">{{subsession.manipulator_colour2}}</label> short position</td>
                <th id="manipulator_escrow_amount2"> 0</th>
            </tr>
        </table>
        <div> <label style="color:{{subsession.manipulator_colour1}}">{{subsession.manipulator_colour1}}</label> Trading
            <br>
            <button type="button" onclick="buy_one_manipulator_colour1()"> BUY </button>
            <button type="button" onclick="sell_one_manipulator_colour1()"> SELL </button>
        </div>
        <div> <label style="color:{{subsession.manipulator_colour2}}">{{subsession.manipulator_colour2}}</label> Trading
            <br>
            <button type="button" onclick="buy_one_manipulator_colour2()"> BUY </button>
            <button type="button" onclick="sell_one_manipulator_colour2()"> SELL </button>
        </div>

    </div>

    <div id="is_rest" style="display: none">
        You are sitting out this round. You do not need to do anything.
    </div>
    <div id="transparent" style="display: none">
    <table class="table" id="tape_table">
        <thead>
            <tr>
                <th scope="col"> Trade Type </th>
                <th scope="col"> Trader Tag </th>
                <th scope="col"> Trade Price </th>
                <th scope="col"> Seconds </th>
            </tr>
        </thead>
        <tbody id="tape_table_body"></tbody>

    </table>
    </div>
    <br><br>
    {{ include 'singleauction/chart.html' }}


{{ endblock }}


{% block scripts %}
<script>
    {% if player.is_forecaster == True %}
        document.getElementById("is_forecaster").style.display = "block";
    {% endif %}
    {% if player.is_trader == True %}
        document.getElementById("is_trader").style.display = "block";
    {% endif %}
    {% if player.is_manipulator == True %}
        document.getElementById("is_manipulator").style.display = "block";
    {% endif %}
    {% if player.is_rest == True %}
        document.getElementById("is_rest").style.display = "block";
    {% endif %}
    {% if subsession.transparent_treatment == True%}
        document.getElementById("transparent").style.display = "block";
    {% endif %}

    function buy_one(){
        liveSend({"trade_type": "buy"});
    }

    function sell_one(){
        liveSend({"trade_type": "sell"});

    }

    function buy_one_manipulator_colour1(){
        liveSend({"trade_type": "buy_manip_1"});

    }

    function buy_one_manipulator_colour2(){
        liveSend({"trade_type": "buy_manip_2"});

    }

    function sell_one_manipulator_colour1(){
        liveSend({"trade_type": "sell_manip_1"});

    }

    function sell_one_manipulator_colour2(){
        liveSend({"trade_type": "sell_manip_2"});

    }

    function liveRecv(data) {
        console.log(data)
        let {highcharts_series, tape_series, z, buy_price, sell_price, current_price, num_shares_in_possession, manipulator_balance_colour1, manipulator_balance_colour2, manipulator_asset_balance_colour1, manipulator_asset_balance_colour2, manipulator_escrow_amount1, manipulator_escrow_amount2, escrow_amount, balance} = data;
        document.getElementById('buy_price').innerText = buy_price;
        document.getElementById('sell_price').innerText = sell_price;
        document.getElementById('balance').innerText = balance;
        document.getElementById('num_shares_in_possession').innerText = num_shares_in_possession;
        document.getElementById('escrow_amount').innerText = escrow_amount;
        document.getElementById('current_price').innerText = current_price;
        document.getElementById('manipulator_balance_colour1').innerText = manipulator_balance_colour1;
        document.getElementById('manipulator_balance_colour2').innerText = manipulator_balance_colour2;
        document.getElementById('manipulator_asset_balance_colour1').innerText = manipulator_asset_balance_colour1;
        document.getElementById('manipulator_asset_balance_colour2').innerText = manipulator_asset_balance_colour2;
        document.getElementById('manipulator_escrow_amount1').innerText = manipulator_escrow_amount1;
        document.getElementById('manipulator_escrow_amount2').innerText = manipulator_escrow_amount2;
        redrawChart(highcharts_series);
        document.getElementById('tape_table_body').innerHTML = z;
    }
</script>
{% endblock %}