{% extends "global/Page.html" %}
{% load otree %}

{% block styles %}

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

    <style>
        .otree-btn-next {
            float: right;
            margin-left: 52.5%;
            margin-right: 47.5%;
        }

        #content {
            padding-left: 100px;
        }

        #inner_div1 {
            width: max-content;
        }

        #inner_div1 p {
            text-align: right
        }

        #market_table {
            margin-top: 20px;
        }

        #market_table .column1 {
            width: 80px;
        }

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

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

{% endblock styles %}
{% block title %}
    Block Check
{% endblock %}

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


    <div id="content">

        {{ include C.block_dierolls_template }}

        <div id="text_field">
            <p> The random draws are listed in the table on the above.</p>
            {% if page_status == 1 %}
                <p> The current sequence has <b>ended within the block, in period {{ block_end_period }};</b> trading
                    activities after that period do not count.</p>
                <p> The points you earn in this sequence is {{ sequence_earnings|to2 }}</p>
                <br/>
                <p> A new sequence may begin depending on the time remaining.</p>
            {% elif page_status == 2 %}
                <p> The current sequence has <b>not ended within the block</b> (all the random draws are <= 9)</p>
                <p> This sequence will continue.</p>
                <br/>
                <p> From the next period on, you will observe the random draw after each period.</p>
            {% endif %}
        </div>
    </div>
            <div class="btn-container">
            <button class="otree-btn-next btn btn-primary" style="width: 80px;">OK</button>
        </div>
{% endblock %}