{% extends "global/Page.html" %}
{% load otree %}
{% block title %}
    Market B 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;
        }


    </style>

{% endblock styles %}

{% block content %}

    <div class="fixedTop">
        {{ include C.fixTop_template }}
    </div>
    <div id="inner_div1">
        <div id="results">
            <h5> Market B 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: </h5>
            {{ if player.type == "1.producer.2.consumer"}}

            <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 you produced in red tokens:&nbsp&nbsp&nbsp&nbsp{{ red_produced }}</P>
            <p> The quantity of good 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/>
            <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 earn by selling the good:&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 the good:&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 }}

            {% if page_status == 0 %}
                {% if player.period < C.block_length %}
                    <p><b>We are still in the block</b>, press "OK" to proceed to the next period.</p>
                {% elif player.period >= C.block_length %}
                    <p><b> We have just finished the block.</b></p>
                    <p> On the next screen, we will learn whether the sequence has ended within the block.</p>
                {% endif %}
            {% elif page_status == 1 %}
                <p><b>The randomly drawn number was <span style="color: forestgreen">{{ random_number }}</span>, which
                    is {{ if random_number < 9 }} smaller than {{ else }} equal to {{ endif }} 9;</b></p>
                <p><b>This sequence will continue.</b></p>
            {% elif page_status == 2 %}
                <p><b>The randomly drawn number was <span style="color: indianred">10</span>.</b></p>
                <p><b>This sequence ends now.</b></p>
                <br/>
                <p> A new sequence may begin depending on the time remaining.</p>
            {% endif %}

        </div>
        <div class="btn-container">
            <button class="otree-btn-next btn btn-primary" style="width: 80px;">OK</button>
        </div>
    </div>


    {{ include C.history_template }}
    <script>
        document.getElementById("stage1").style.opacity = "0.3";
    </script>

{% endblock %}