{{ block title }}
    Practice
{{ endblock }}
{{ block content }}
    <link rel="stylesheet" type="text/css" href="{{ static 'css/table-styles.css' }}">
    <link rel="stylesheet" type="text/css" href="{{ static 'css/global-styles.css' }}">
    <script src="{{ static 'js/table.js' }}"></script>

    {{ formfield_errors 'choice' }}
    <input type="hidden" name="choice" id="choice"/>

    <p class="big">This is a practice round.  You will have 5 minutes to try to find
    the option which has the attributes with the highest sum.  Select the option
    that you think is best and click 'Next'.</p>

    <table class="choice-tab">
        <thead>
          <tr>
            {% for name in column_names %}
            <th>{{ name }}</th>
            {% endfor %}
          </tr>
        </thead>
        <tbody>
        {{ for key, r in numbers.items() }}

        <tr>
            <td>
                <input type="radio" class="choice-rad" name="choice" id="choice_{{ key }}" value="{{ key }}"/>
                <label for="choice_{{ key }}">{{ key }}</label>
            </td>
            {{ for n in r }}
                <td class="choice-tile">
                    <div class="cover">
                        <div class="n-cell"> {{ n }} </div>
                    </div>
                </td>
            {{ endfor }}
        </tr>
        {{ endfor }}
        </tbody>
    </table>

    {{ next_button }}

{{ endblock }}