{{ block title }}Choose Your Advisor{{ endblock }}
{{ block content }}

<div class="card border-secondary mb-3">
    <div class="card-body">
        <p class="mb-3 fw-bold">Which advisor would you like to consult?</p>
        <p class="mb-2">
            <a class="btn btn-outline-secondary btn-sm" data-toggle="collapse" data-bs-toggle="collapse" href="#accuracyOdds" role="button">Remind me of the accuracy odds</a>
        </p>
        <div class="collapse mb-2" id="accuracyOdds">
            <div class="row small">
                <div class="col-md-6">
                    <h5 class="mb-1">Dots &amp; Co.</h5>
                    <table class="table table-sm table-bordered">
                        <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">
                        <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>
        {{ formfield 'selected_advisor_type' }}
    </div>
</div>

{{ next_button }}

{{ endblock }}