{{ block title }}
    Practice Round Results
{{ 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>
        $(window).on('load', function () {
            let c = js_vars.choice;
            $('#choice_' + c).prop('checked', true);

            $('#total_C').css('background-color', 'yellow')
        });
    </script>

    <p class="big">
    {{ if correct }}
         You selected the option with the highest sum.
    {{ else }}
            {{ if player.choice }}
                You chose option {{ player.choice }}.
            {{ else }}
                You did not make a choice in the time.
            {{ endif }}
            The option with the highest  sum of attributes was C.
    {{ endif }}
    </p>

    <table class="choice-tab">
        <thead>
          <tr>
              <th>Options/Attributes</th>
              <th>Total</th>
          </tr>
        </thead>
        <tbody>
        {{ for key, total in totals.items() }}
        <tr>
            <td>
                <input type="radio" class="choice-rad" name="choice" id="choice_{{ key }}" disabled value="{{ key }}"/>
                <label for="choice_{{ key }}">{{ key }}</label>
            </td>
            <td class="choice-tile">
                <div id="total_{{ key }}"> {{ total }} </div>
            </td>
        </tr>
        {{ endfor }}
        </tbody>
    </table>

    <p style="font-size: 25px"> Please click "Next" to start the experiment. Your bonus payment will depend on the choices you make in the next 20 rounds. To recap, 1 round out of 20 will be chosen at random to determine your payment. Hence, each round matters. </p>
{{ next_button }}

{{ endblock }}