{{ block title }}
    Discussion Page
    {% load otree static %}
    <link rel="stylesheet" href="{% static 'global/css/style.css' %}"/>
{{ endblock }}
{{ block content }}
    <div class="round-number">
        <p> Round {{ player.round_number }} / {{ C.NUM_ROUNDS }}</p>
    </div>
    <div class="row">
        <div class="column">
            <h4 class="score m-3" style="float: center; color: brown;">Score: {{ group.score }}</h4>
        </div>
        <div class = "column">
            {% if player.is_leader %}
                <div class="card-container">
                    <div class="leader-card bg-blue text-white">
                        <div class="card-body">
                        <h6 class="card-title">You are the <span style="font-weight: bold;">leader</span></h6>
                        </div>
                    </div>
                </div>
            {% else %}
                <div class="card-container">
                    <div class="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>
                        {% for p in group.get_players%}
                            {% if p.is_leader %}
                                <h6 class="card-title"><span class={{p.color}}>{% p.nickname %}</span> is the leader</h6>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div> 

    <div class="card bg-light m-3"> <div class="card-body">
        <h3> Pre-Round Discussion</h3>
        <p> 
            Your name during this game is <span class="{{player.color}} bold italic"> {{player.nickname}}</span>! <br>
            In this page the team leader will select a question and value. Please use the chat box to discuss strategy and help the leader decide. A table of the questions and value options is displayed below to help with your decision.
        </p>
        </div> 
    </div>
    {{ if player.is_leader }}
        <div class="spacer"></div>
        <div style="text-align: center;">
            <p style="padding-top:30px; color: rgb(165, 77, 42); font-size: small;"> Only press the button you want to choose once you have made your choice.</p>
        </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>
    {{ else }}
        <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>
            <input type="hidden" id="button_pressed" name="button_pressed" value="">
        </div>
    {{ endif }}
    <div style="text-align: center;">
        <h5 style=padding-top:30px>&darr; Use the chat below to talk to your team &darr;</h5>
    </div>
    {{ chat nickname=player.nickname channel=group.currentDiscussion1_channel}}
    {{ if not player.is_leader }}
        <div style="text-align: center;">
            <p style="padding-top:30px; color: rgb(165, 77, 42); font-size: small;"> Only press the Next button when you are ready to proceed.</p>
            {{ next_button }}
        </div>
    {{ endif }}
    
    <script>
        function updateButtonValue(button_name) {
            console.log('Button Pressed')
            document.getElementById('button_pressed').value = button_name;
        }
    </script>

{{ endblock }}