{{ block title }}
    Category / Difficulty Choice
    {% load otree static %}
    <link rel="stylesheet" href="{% static 'global/css/style.css' %}"/>
{{ endblock }}

{{ block content }}
    <p class="score">Score: {{ group.score }}</p>
    <div class="card leader-card bg-orange text-white">
        <div class="card-body">
          <h6 class="card-title">You are <span style="font-weight: bold;">not</span> the leader</h6>
        </div>
    </div>
    <div class="form-group required">
        <table class="table table-bordered text-center" style="width: auto; margin: auto">
            <tr>
                <th colspan="2" rowspan="2"></th>
                <th colspan="5">Categories</th>
            </tr>
            <tr>
                <th>American History</th>
                <th>Geography</th>
                <th>Literature</th>
                <th>Pop Culture</th>
                <th>Science</th>
            </tr>
            <tr>
                <th rowspan="3"><span>Question Value</span></th>
                <th>Easy</th>
                <td>{{C.PAYOFF_A}}</td>
                <td>{{C.PAYOFF_A}}</td>
                <td>{{C.PAYOFF_A}}</td>
                <td>{{C.PAYOFF_A}}</td>
                <td>{{C.PAYOFF_A}}</td>
            </tr>
            <tr>
                <th>Medium</th>
                <td>{{C.PAYOFF_B}}</td>
                <td>{{C.PAYOFF_B}}</td>
                <td>{{C.PAYOFF_B}}</td>
                <td>{{C.PAYOFF_B}}</td>
                <td>{{C.PAYOFF_B}}</td>
            </tr>
            <tr>
                <th>Hard</th>
                <td>{{C.PAYOFF_C}}</td>
                <td>{{C.PAYOFF_C}}</td>
                <td>{{C.PAYOFF_C}}</td>
                <td>{{C.PAYOFF_C}}</td>
                <td>{{C.PAYOFF_C}}</td>
            </tr>
        </table>
    </div>

    <p>Here you can chat with the other participant.</p>

    {{ chat nickname=player.nickname }}


    {{ include_sibling 'instructions.html' }}

{{ endblock }}