{% load otree static %}

{{ block title }} 
Influence Survey 
<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="centered-text">
        <p> The correct answer was <span class="italic blue">{{correct_answer}}!</span> Please see how your group answered in the table bellow.</p>
    </div>
    <div class="table-container">
        <table class="table table-bordered fixed-width-table">
            <tbody>
            <tr>
                <td>
                    <span style="margin-left: 20%;">
                        <span class={{player1_color}}>{{ player1_nickname }} </span> {{ if player.id_in_group == 1 }} (you) {{ endif }}
                    </span> 
                    {% if player1_is_correct %}
                        <span class="correct">&#10003;</span>
                    {% else %}
                        <span class="incorrect">&#10008;</span>
                    {% endif %}
                </td>
                <td>
                    <span style="margin-left: 20%;">
                        <span class={{player2_color}}>{{ player2_nickname }} </span> {{ if player.id_in_group == 2 }} (you) {{ endif }}
                    </span> 
                    {% if player2_is_correct %}
                        <span class="correct">&#10003;</span>
                    {% else %}
                        <span class="incorrect">&#10008;</span>
                    {% endif %}
                </td>
            </tr>
            <tr>
                <td>
                    <span style="margin-left: 20%;">
                        <span class={{player3_color}}>{{ player3_nickname }} </span> {{ if player.id_in_group == 3 }} (you) {{ endif }}
                    </span> 
                    {% if player3_is_correct %}
                        <span class="correct">&#10003;</span>
                    {% else %}
                        <span class="incorrect">&#10008;</span>
                    {% endif %}
                </td>
                <td>
                    <span style="margin-left: 20%;"> 
                        <span class={{player4_color}}>{{ player4_nickname }} </span> {{ if player.id_in_group == 4 }} (you) {{ endif }}
                    </span> 
                    {% if player4_is_correct %}
                        <span class="correct">&#10003;</span>
                    {% else %}
                        <span class="incorrect">&#10008;</span>
                    {% endif %}
                </td>
            </tr>
            </tbody>
        </table>
    </div>
      
    <div class="card bg-light m-3">
        <div class="card-body">
            <h3> Influence Survey</h3>
            <div class="question-container appraisal-container">
                <p>
                    Please answer the survey below by <span class="bold">ranking the influence</span> of yourself as well as each team members includeing the AI agent on your final answer. 
                    
                </p>
            </div>
            <br></br>
            <div class="question-container">
                <p class="bold {{player.color}}">Yourself</p>
                <p class="slider-p">
                    Least &nbsp;
                    {% if player.id_in_group == 1 %}
                        {{ for choice in form.player1_influence }}
                            {{ choice }}
                        {{ endfor }}
                    {% elif player.id_in_group == 2 %}
                        {{ for choice in form.player2_influence }}
                            {{ choice }}
                        {{ endfor }}
                    {% elif player.id_in_group == 3 %}
                        {{ for choice in form.player3_influence }}
                            {{ choice }}
                        {{ endfor }}
                    {% elif player.id_in_group == 4 %}
                        {{ for choice in form.player4_influence }}
                            {{ choice }}
                        {{ endfor }}
                    {% endif %}
                    &nbsp; Most
                </p>

                {% if player.id_in_group != 1 %}
                    <p class="bold {{player1_color}}">{% player1_nickname %}</p>
                    <p class="slider-p">
                        Least &nbsp;
                        {{ for choice in form.player1_influence }}
                            {{ choice }}
                        {{ endfor }}
                        &nbsp; Most
                    </p>
                {% endif %} 
                {% if player.id_in_group != 2 %}
                    <p class="bold {{player2_color}}">{% player2_nickname %}</p>
                    <p class="slider-p">
                        Least &nbsp;
                        {{ for choice in form.player2_influence }}
                            {{ choice }}
                        {{ endfor }}
                        &nbsp; Most
                    </p>
                {% endif %}
                {% if player.id_in_group != 3 %}
                    <p class="bold {{player3_color}}">{% player3_nickname %}</p>
                    <p class="slider-p">
                        Least &nbsp;
                        {{ for choice in form.player3_influence }}
                            {{ choice }}
                        {{ endfor }}
                        &nbsp; Most
                    </p>
                {% endif %}
                {% if player.id_in_group != 4 %}
                    <p class="bold {{player4_color}}">{% player4_nickname %}</p>
                    <p class="slider-p">
                        Least &nbsp;
                        {{ for choice in form.player4_influence }}
                            {{ choice }}
                        {{ endfor }}
                        &nbsp; Most
                    </p>
                {% endif %}
                <p class="bold">AI Agent</p>
                <p class="slider-p">
                    Least &nbsp;
                    {{ for choice in form.ai_influence }}
                        {{ choice }}
                    {{ endfor }}
                    &nbsp; Most
                </p>
            </div>
        </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 }}