{% load otree static %}

{{ block title }}
Group Discussion
<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>
    <h4 class="score m-3" style="float: center; color: brown;">Score: {{ group.score }}</h4>
    <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">{% p.nickname %} is the leader</h6>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endif %}
    </div>
    <div class="card bg-light m-3">
        <div class="card-body">
            <h6>Category: {{category}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Difficulty: {{difficulty}}</h6>
            <div class="question-container appraisal-container">
            <p>
                In this round, you need to <span class="bold">discuss with your teammates</span>, and once you have made your decision, answer 
                the question bellow along with your confidence level individually. During this round you will be provided with the AI 
                agent's suggenstion and its confidence on the answer.
            </p>
            </div>
            <div class="question-container">
                <h5 style="color: #326ba8;">AI agent recommends choice <span style="font-style: italic; font-weight: bold;">
                    {{ ai_answer }}</span> with a confidence of <span style="font-style: italic; font-weight: bold;">{{ ai_confidence }} %
                    </span></h5>
                <form method="POST" id="group-answers">
                    {{ formfield 'group_answer' label=question }}
                    <p>How confident are you about your answer?</p>
                    <p class="slider-p">
                        Least Confident &nbsp;
                        {{ for choice in form.group_confidence }}
                            {{ choice }}
                        {{ endfor }}
                        &nbsp; Most Confident
                    </p>
                </form>
            </div>
        </div>
    </div>
    <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.currentDiscussion2_channel}}
    <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>


    <!-- {{ next_button }} -->

{{ endblock }}