{{ block title }}
    Question
    <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>
    <div class="card bg-light m-3">
        <div class="card-body">
            <p> Please <b>answer</b> the multiple choice question bellow along with your <b>confidence</b> level. 
                Your initial answer and your confidence will <span style="font-weight: bold;">not</span> be displayed to your teammates 
                will <span style="font-weight: bold;">not</span> affect your group score. 
            </p>
        </div>
    </div>
    <div class="card bg-light m-3">
        <div class="card-body">
            <h6>Category: {{category}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Difficulty: {{difficulty}}</h6>
        
            <form method="POST" id="individual-answers">
                <div class="question-container">
                    {{ formfield 'individual_answer' label=question }}
                    <p>How confident are you about your answer?</p>
                    <p class="slider-p">
                        Least Confident &nbsp;
                        {{ if player.id_in_group == 1}}
                            {{ for choice in form.player1_appraisal }}
                                {{ choice }}
                            {{ endfor }}
                        {{ elif player.id_in_group == 2 }}
                            {{ for choice in form.player2_appraisal }}
                                {{ choice }}
                            {{ endfor }}
                        {{ elif player.id_in_group == 3 }}
                            {{ for choice in form.player3_appraisal }}
                                {{ choice }}
                            {{ endfor }}
                        {{ elif player.id_in_group == 4 }}
                            {{ for choice in form.player4_appraisal }}
                                {{ choice }}
                            {{ endfor }}
                        {{ endif }}
                        &nbsp; Most Confident
                    </p>
                </div>
                {{ if player.round_number > 1}}
                    <div class="question-container appraisal-container">
                        <p> Please also select your <span class="bold">appraisal</span> of other teammates in the form bellow.
                            The number you choose indicates <u>your belief in each of your teammates answering the question correctly.</u>
                            Your choice will not be displayed to other teammates.
                        </p>
                    </div>
                    <div class="question-container">
                        {{ if player.id_in_group != 1}}
                            <p> <span class="{{player1_color}} bold">{{player1_nickname}}</span> Appraisal </p>
                            <p class="slider-p">
                                Least &nbsp;
                                {{ for choice in form.player1_appraisal }}
                                    {{ choice }}
                                {{ endfor }}
                                &nbsp; Most 
                            </p>
                        {{ endif }}
                        {{ if player.id_in_group != 2 }}
                            <p> <span class="{{player2_color}} bold">{{player2_nickname}}</span> Appraisal </p>
                            <p class="slider-p">
                                Least &nbsp;
                                {{ for choice in form.player2_appraisal }}
                                    {{ choice }}
                                {{ endfor }}
                                &nbsp; Most
                            </p>
                        {{ endif }}
                        {{ if player.id_in_group != 3 }}
                        <p> <span class="{{player3_color}} bold">{{player3_nickname}}</span> Appraisal </p>
                        <p class="slider-p">
                            Least &nbsp;
                            {{ for choice in form.player3_appraisal }}
                                {{ choice }}
                            {{ endfor }}
                            &nbsp; Most
                        </p>
                        {{ endif }}
                        {{ if player.id_in_group != 4 }}
                            <p> <span class="{{player4_color}} bold">{{player4_nickname}}</span> Appraisal </p>
                            <p class="slider-p">
                                Least &nbsp;
                                {{ for choice in form.player4_appraisal }}
                                    {{ choice }}
                                {{ endfor }}
                                &nbsp; Most
                            </p>
                        {{ endif }}
                    </div>
                {{ endif }}
            </form>
        </div>
    </div>


    <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>
{{ endblock }}