{{ block title }}Block {{ block_num }} Introduction{{ endblock }}
{{ block content }}

<style>
.table.block-intro-odds-table tbody td { font-weight: normal; }
</style>

<div class="card bg-light m-3">
    <div class="card-body">
        <h3>Block {{ block_num }}</h3>

        {% if block_num == 1 %}
            <p>
                In this block, you will see 20 pixel images and state your belief (0-100) that Red is the majority (before and after advisor advice). You will receive advice from two advisors:
                {{ block_high_name }} and {{ block_low_name }}.
            </p>
        {% else %}
            <p>
                Previous block complete! In this block you will work with {{ block_high_name }} and {{ block_low_name }}.
            </p>
        {% endif %}

        <p>**IMPORTANT**:You will have ONE ADVISOR from each company the WHOLE BLOCK. This means if an advisor's true accuracy is 90%, it will remain at that level for the entire block.</p> 
        <p class="mb-2">As a reminder, Dots &amp; Co. is <strong>historically more favorable</strong> than PixelHouse. You have a better chance of getting a more accurate advisor from Dots &amp; Co
            
            <a class="btn btn-outline-secondary btn-sm" data-toggle="collapse" data-bs-toggle="collapse" href="#blockIntroOdds" role="button">show accuracy / # of advisors</a></p>
        <div class="collapse mb-2" id="blockIntroOdds">
            <div class="row">
                <div class="col-md-6">
                    <h5 class="mb-1">Dots &amp; Co.</h5>
                    <table class="table table-sm table-bordered block-intro-odds-table">
                        <thead><tr><th>Accuracy of advisors</th><th># of advisors</th></tr></thead>
                        <tbody>
                            {% for row in table_favorable %}
                            <tr><td>{{ row.accuracy }}</td><td>{{ row.count }}</td></tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="col-md-6">
                    <h5 class="mb-1">PixelHouse</h5>
                    <table class="table table-sm table-bordered block-intro-odds-table">
                        <thead><tr><th>Accuracy of advisors</th><th># of advisors</th></tr></thead>
                        <tbody>
                            {% for row in table_inverse %}
                            <tr><td>{{ row.accuracy }}</td><td>{{ row.count }}</td></tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        
        
        <p>Your payment each block comes from two randomly chosen confidence statements (one from before and one from after the advice). <br>
            **It is in your best interest to give your honest guess of the odds
            there are more Red than Blue pixels.**
        </p>
        {% if is_active %}
            <p class="alert alert-info">
                <strong>You will CHOOSE which advisor to consult. There is no cost for switching advisors.</strong>
            </p>
        {% else %}
            <p class="alert alert-info">
                <strong>An advisor will be RANDOMLY assigned to you each round. You cannot choose.</strong>
            </p>
        {% endif %}
    </div>
</div>

{{ next_button }}

{{ endblock }}