{% extends "global/Page.html" %}
{% load otree %}
{% block title %}
    Market A Summary
{% endblock %}

{% block styles %}
    {% include C.table_style_template %}
    {% include C.common_style_template %}

    <style>
        #inner_div1 {
        {#width: fit-content;#}

        }

        #inner_div1 p {
            text-align: left
        }

        #results {
            padding-left: 400px;
        }

        #market_table {
            margin-top: 20px;
        }

        #market_table .column1 {
            width: 80px;
        }

        #market_table .column2, .column3, .column4, .column5, .column6, .column7, .column8, .column9, .column13, .column14 {
            width: 110px;
        }

        #market_table .column10, .column11, .column12 {
            width: 140px;
        }
    </style>

{% endblock styles %}

{% block content %}

    <div class="fixedTop">
        {{ include C.fixTop_template }}
    </div>

    <div id="inner_div1">
        <div id="results">

            <h5> Market A trading results: </h5>
            <p> The total quantity of red tokens bid by participants:&nbsp&nbsp&nbsp&nbsp{{ total_red_tokens_bid }}</p>
            <p> The total quantity of good planned to be produced in red
                tokens:&nbsp&nbsp&nbsp&nbsp{{ total_produced_red }}</P>
            <p> The price of the good A in red tokens:&nbsp&nbsp&nbsp&nbsp <span
                    class="red_price">{{ price_red|to2 }}</span></P>


            <p> The total quantity of green tokens bid by
                participants:&nbsp&nbsp&nbsp&nbsp{{ total_green_tokens_bid }}</p>
            <p> The total quantity of good planned to be produced in green
                tokens:&nbsp&nbsp&nbsp&nbsp{{ total_produced_green }}</P>
            <p> The price of the good A in green tokens:&nbsp&nbsp&nbsp&nbsp<span
                    class="green_price">{{ price_green|to2 }}</span></P>
            <br/>
            <h5> Points update: </h5>
            {{ if player.type == "1.consumer.2.producer"}}
            <p> The quantity of good you bought and consumed in red
                tokens:&nbsp&nbsp&nbsp&nbsp{{ quantity_bought_red }}</P>
            <p> The quantity of good you bought and consumed in green
                tokens:&nbsp&nbsp&nbsp&nbsp{{ quantity_bought_green }}</P>
            <p style="font-weight: bold"> The net points you earn in this
                market:&nbsp&nbsp&nbsp&nbsp{{ point_earned_in_market|to2 }}</P>
            <br/>
            <h5> Token balances update: </h5>
            <p> Your <span class="red_price">red token</span> holdings at the beginning of the
                market:&nbsp&nbsp&nbsp&nbsp{{ beginning_red_balance|to2 }}</P>
            <p> The quantity of <span class="red_price">red tokens</span> you spent on the
                good:&nbsp&nbsp&nbsp&nbsp{{ red_spent }}</P>
            <p style="font-weight: bold"> Your <span class="red_price">red token</span> holdings at the end of the
                market:&nbsp&nbsp&nbsp&nbsp{{ ending_red_balance|to2 }}</P>

            <p> Your <span class="green_price">green token</span> holdings at the beginning of the
                market:&nbsp&nbsp&nbsp&nbsp{{ beginning_green_balance|to2 }}</P>
            <p> The quantity of <span class="green_price">green tokens</span> you spent on the
                good:&nbsp&nbsp&nbsp&nbsp{{ green_spent }}</P>
            <p style="font-weight: bold"> Your <span class="green_price">green token</span> holdings at the end of the
                market:&nbsp&nbsp&nbsp&nbsp{{ ending_green_balance|to2 }}</P>
            <br/>

            {{ else }}
            <p> The quantity of good A you produced in red tokens:&nbsp&nbsp&nbsp&nbsp{{ red_produced }}</P>
            <p> The quantity of good A you produced in green tokens:&nbsp&nbsp&nbsp&nbsp{{ green_produced }}</P>
            <p style="font-weight: bold"> The net points you earn in this
                market:&nbsp&nbsp&nbsp&nbsp{{ point_earned_in_market|to2 }}</P>
            <br/>
            <p> Your <span class="red_price">red token</span> holdings at the beginning of the
                market:&nbsp&nbsp&nbsp&nbsp{{ beginning_red_balance|to2 }}</P>
            <p> The quantity of <span class="red_price">red tokens</span> you earn by selling good
                A:&nbsp&nbsp&nbsp&nbsp{{ red_earned|to2 }}</P>
            <p style="font-weight: bold"> Your <span class="red_price">red token</span> holdings at the end of the
                market:&nbsp&nbsp&nbsp&nbsp{{ ending_red_balance|to2 }}</P>
            <p> Your <span class="green_price">green token</span> holdings at the beginning of the
                market:&nbsp&nbsp&nbsp&nbsp{{ beginning_green_balance|to2 }}</P>
            <p> The quantity of <span class="green_price">green tokens</span> you earn by selling good
                A:&nbsp&nbsp&nbsp&nbsp{{ green_earned|to2 }}</P>
            <p style="font-weight: bold"> Your <span class="green_price">green token</span> holdings at the end of the
                market:&nbsp&nbsp&nbsp&nbsp{{ ending_green_balance|to2 }}</P>
            <br/>
            {{ endif }}

            <p>Press "OK" to proceed to Market B.</p>
        </div>
        <div class="btn-container">
            <button class="otree-btn-next btn btn-primary" style="width: 80px;">OK</button>
        </div>
    </div>
    {{ if show_table}}
    {{ include C.history_template }}
    {{ endif }}
    <script>
        document.getElementById("stage2").style.opacity = "0.3"
    </script>
{% endblock %}