{{ block title }}Check your understanding{{ endblock }}
{{ block content }}

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

<div class="card bg-light m-3">
    <div class="card-body">
        <p class="mb-0">Answer the two questions below. You can open the accuracy table for reference if needed.</p>
    </div>
</div>

<div class="card m-3">
    <div class="card-body">
        <p class="mb-2"><strong>1. How many Dots &amp; Co. advisors are 90% accurate?</strong></p>
        <p class="text-muted small mb-2">(Select the number of advisors out of 100.)</p>
        {{ form.odds_dots_90 }}
        {{ formfield_errors 'odds_dots_90' }}
    </div>
</div>

<div class="card m-3">
    <div class="card-body">
        <p class="mb-2"><strong>2. How many PixelHouse advisors are 90% accurate?</strong></p>
        <p class="text-muted small mb-2">(Select the number of advisors out of 100.)</p>
        {{ form.odds_pixel_90 }}
        {{ formfield_errors 'odds_pixel_90' }}
    </div>
</div>

<div class="card m-3">
    <div class="card-body">
        <p class="mb-2">
            <a class="btn btn-outline-secondary btn-sm" data-toggle="collapse" data-bs-toggle="collapse" href="#accuracyTableRef" role="button">
                Show accuracy table for reference
            </a>
        </p>
        <div class="collapse" id="accuracyTableRef">
            <div class="row">
                <div class="col-md-6">
                    <h5 class="mb-1">Dots &amp; Co.</h5>
                    <table class="table table-sm table-bordered odds-check-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 odds-check-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>
    </div>
</div>

{{ next_button }}

{{ endblock }}