{{ block title }}
    Your Choice
    {% load otree static %}
    <link rel="stylesheet" href="{% static 'global/css/style.css' %}"/>
{{ endblock }}
{{ block content }}
<div class="row">
    <div class="column">
        <h4 class="score m-3" style="float: center; color: brown;">Score: {{ group.score }}</h4>
    </div>
    <div class = "column">
        <div class="card-container">
            <div class="leader-card bg-blue text-white">
                <div class="card-body">
                <h5 class="card-title">You are the <span style="font-weight: bold;">leader</span></h5>
                </div>
            </div>
        </div>
    </div>
</div>    
    <div class="spacer"></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>
                {{ if AH1 }}
                    <td><button name="AH1" value="True" class="btn btn-primary btn-large" onclick="updateButtonValue('AH1')">{{C.PAYOFF_A}}</button></td>
                {{ else }}
                    <td><button name="AH1" value="True" class="btn btn-primary btn-large" onclick="updateButtonValue('AH1')" disabled>{{C.PAYOFF_A}}</button></td>
                {{ endif }}
                {{ if GEO1 }}
                    <td><button name="GEO1" value="True" class="btn btn-primary btn-large" onclick="updateButtonValue('GEO1')">{{C.PAYOFF_A}}</button></td>
                {{ else }}
                    <td><button name="GEO1" value="True" class="btn btn-primary btn-large" onclick="updateButtonValue('GEO1')" disabled>{{C.PAYOFF_A}}</button></td>
                {{ endif }}
                {{ if LIT1 }}
                    <td><button name="LIT1" value="True" class="btn btn-primary btn-large" onclick="updateButtonValue('LIT1')">{{C.PAYOFF_A}}</button></td>
                {{ else }}
                    <td><button name="LIT1" value="True" class="btn btn-primary btn-large" onclick="updateButtonValue('LIT1')" disabled>{{C.PAYOFF_A}}</button></td>
                {{ endif }}
                {{ if PC1 }}
                    <td><button name="PC1" value="True" class="btn btn-primary btn-large" onclick="updateButtonValue('PC1')">{{C.PAYOFF_A}}</button></td>
                {{ else }}
                    <td><button name="PC1" value="True" class="btn btn-primary btn-large" onclick="updateButtonValue('PC1')" disabled>{{C.PAYOFF_A}}</button></td>
                {{ endif }}
                {{ if SC1 }}
                    <td><button name="SC1" value="True" class="btn btn-primary btn-large" onclick="updateButtonValue('SC1')">{{C.PAYOFF_A}}</button></td>
                {{ else }}
                    <td><button name="SC1" value="True" class="btn btn-primary btn-large" onclick="updateButtonValue('SC1')" disabled>{{C.PAYOFF_A}}</button></td>
                {{ endif }}
            </tr>
            <tr>
                <th>Medium</th>
                {{ if AH2 }}
                    <td><button name="AH2" value="True" class="btn btn-primary btn-large" onclick="updateButtonValue('AH2')">{{C.PAYOFF_B}}</button></td>
                {{ else }}
                    <td><button name="AH2" value="True" class="btn btn-primary btn-large" onclick="updateButtonValue('AH2')" disabled>{{C.PAYOFF_B}}</button></td>
                {{ endif }}
                {{ if GEO2 }}
                    <td><button name="GEO2" value="True" class="btn btn-primary btn-large" onclick="updateButtonValue('GEO2')">{{C.PAYOFF_B}}</button></td>
                {{ else }}
                    <td><button name="GEO2" value="True" class="btn btn-primary btn-large" onclick="updateButtonValue('GEO2')" disabled>{{C.PAYOFF_B}}</button></td>
                {{ endif }}
                {{ if LIT2 }}
                    <td><button name="LIT2" value="True" class="btn btn-primary btn-large" onclick="updateButtonValue('LIT2')">{{C.PAYOFF_B}}</button></td>
                {{ else }}
                    <td><button name="LIT2" value="True" class="btn btn-primary btn-large" onclick="updateButtonValue('LIT2')" disabled>{{C.PAYOFF_B}}</button></td>
                {{ endif }}
                {{ if PC2 }}
                    <td><button name="PC2" value="True" class="btn btn-primary btn-large" onclick="updateButtonValue('PC2')">{{C.PAYOFF_B}}</button></td>
                {{ else }}
                    <td><button name="PC2" value="True" class="btn btn-primary btn-large" onclick="updateButtonValue('PC2')" disabled>{{C.PAYOFF_B}}</button></td>
                {{ endif }}
                {{ if SC2 }}
                    <td><button name="SC2" value="True" class="btn btn-primary btn-large" onclick="updateButtonValue('SC2')">{{C.PAYOFF_B}}</button></td>
                {{ else }}
                    <td><button name="SC2" value="True" class="btn btn-primary btn-large" onclick="updateButtonValue('SC2')" disabled>{{C.PAYOFF_B}}</button></td>
                {{ endif }}
            </tr>
            <tr>
                <th>Hard</th>
                {{ if AH3 }}
                    <td><button name="AH3" value="True" class="btn btn-primary btn-large" onclick="updateButtonValue('AH3')">{{C.PAYOFF_C}}</button></td>
                {{ else }}
                    <td><button name="AH3" value="True" class="btn btn-primary btn-large" onclick="updateButtonValue('AH3')" disabled>{{C.PAYOFF_C}}</button></td>
                {{ endif }}
                {{ if GEO3 }}
                    <td><button name="GEO3" value="True" class="btn btn-primary btn-large" onclick="updateButtonValue('GEO3')">{{C.PAYOFF_C}}</button></td>
                {{ else }}
                    <td><button name="GEO3" value="True" class="btn btn-primary btn-large" onclick="updateButtonValue('GEO3')" disabled>{{C.PAYOFF_C}}</button></td>
                {{ endif }}
                {{ if LIT3 }}
                    <td><button name="LIT3" value="True" class="btn btn-primary btn-large" onclick="updateButtonValue('LIT3')">{{C.PAYOFF_C}}</button></td>
                {{ else }}
                    <td><button name="LIT3" value="True" class="btn btn-primary btn-large" onclick="updateButtonValue('LIT3')" disabled>{{C.PAYOFF_C}}</button></td>
                {{ endif }}
                {{ if PC3 }}
                    <td><button name="PC3" value="True" class="btn btn-primary btn-large" onclick="updateButtonValue('PC3')">{{C.PAYOFF_C}}</button></td>
                {{ else }}
                    <td><button name="PC3" value="True" class="btn btn-primary btn-large" onclick="updateButtonValue('PC3')" disabled>{{C.PAYOFF_C}}</button></td>
                {{ endif }}
                {{ if SC3 }}
                    <td><button name="SC3" value="True" class="btn btn-primary btn-large" onclick="updateButtonValue('SC3')">{{C.PAYOFF_C}}</button></td>
                {{ else }}
                    <td><button name="SC3" value="True" class="btn btn-primary btn-large" onclick="updateButtonValue('SC3')" disabled>{{C.PAYOFF_C}}</button></td>
                {{ endif }}
            </tr>
        </table>
        <input type="hidden" id="button_pressed" name="button_pressed" value="">
    </div>

    <script>
        function updateButtonValue(button_name) {
            document.getElementById('button_pressed').value = button_name;
        }
    </script>

{{ endblock }}