{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
    
{% endblock %}

{% block scripts %}

    <!-- Here comes the javascript for tracking the changes in decision making  //-->
    <script>

        var current_team;
        var all_teams = "seq_teams";
        
        // Here we call the formfield for the selection of the team and add a keyup event to it
        document.getElementById("id_choice_selectPortfolio").addEventListener('keyup', function getChangesTeam (){

            /* Whenever a key is released while in the formield, the entered value is retrieved and added to the decision sequence */
            current_team = document.getElementById("id_choice_selectPortfolio").value;
            all_teams = all_teams + ", " + String(current_team);

            // The changes from above are saved into the hidden input fields
            document.getElementById("outputTeam").innerHTML = current_team;
            document.getElementById("id_current_team").value = current_team;
            document.getElementById("id_all_teams").value = all_teams;

            });

    </script>



{% endblock %}

{% block content %}

    <p>
    A consultant already built three teams for you to choose from. You are presented with the position-fit and team-fit of each candidate. You cannot transfer candidates between teams.<br><br>
    Please choose the team that you want to hire.<br><br>
    </p>

    <!-- Here is the table that presents the possible teams to the player //-->
    <p>
    <table 
        width="400px" border>
        <tr bgcolor="lightgrey">
            <th style="text-align:center">Team 1</th>
            <th style="text-align:center">Person A</th>
            <th style="text-align:center">Person B</th>
            <th style="text-align:center">Person C</th>
        </tr>
        <tr>
            <td>Sum Skill Scores</td>
            <td style="text-align:center">190</td>
            <td style="text-align:center">220</td>
            <td style="text-align:center">200</td>
        </tr>
        <tr>
            <td>Team Compatibility</td>
            <td style="text-align:center">50</td>
            <td style="text-align:center">40</td>
            <td style="text-align:center">45</td>
        </tr>
    </table>
    </p>
    <p>
    <table 
        width="400px" border>
        <tr bgcolor="lightgrey">   
            <th style="text-align:center">Team 2</th>
            <th style="text-align:center">Person D</th>
            <th style="text-align:center">Person E</th>
            <th style="text-align:center">Person F</th>
        </tr>
        <tr>
            <td>Sum Skill Scores</td>
            <td style="text-align:center">200</td>
            <td style="text-align:center">280</td>
            <td style="text-align:center">220</td>
        </tr>
        <tr>
            <td>Team Compatibility</td>
            <td style="text-align:center">70</td>
            <td style="text-align:center">30</td>
            <td style="text-align:center">40</td>
        </tr>
    </table>
    </p>
    <p>
    <table 
        width="400px" border>
        <tr bgcolor="lightgrey">
            <th style="text-align:center">Team 3</th>
            <th style="text-align:center">Person G</th>
            <th style="text-align:center">Person H</th>
            <th style="text-align:center">Person I</th>
        </tr>
        <tr>
            <td>Sum Skill Scores</td>
            <td style="text-align:center">160</td>
            <td style="text-align:center">180</td>
            <td style="text-align:center">240</td>
        </tr>
        <tr>
            <td>Team Compatibility</td>
            <td style="text-align:center">75</td>
            <td style="text-align:center">55</td>
            <td style="text-align:center">30</td>
        </tr>
    </table>
    </p>

    <!-- Here we call the formfields where the player enters his chosen team and his perceived complexity  //-->
    {% formfield player.choice_selectPortfolio %}
    <br>
    {% formfield player.complex_selectPortfolio %}
    <br>
    {% next_button %}

    <!-- Here we repeat the instructions so that the player may read them again //-->
    <br><hr>
    <p><font color="#DF7401">
        Assume the following situation for the next two tasks:<br><br>
        Your department is allowed to create three new positions. All three positions have the same requirements.
        <br>
        The HR department already sorted all applications and presents you with the final nine candidates. Because all positions have the same requirements, each candidate could be hired for each position.<br><br>
        To help with your decision, the HR department rated the candidates on the four most important skills and their team compatibility factor (TC) based on CVs, cover letters and interviews. The skill items are ranked on a scale from 0% to 100% (0% - low ability, 100% - high ability). This gives the <b>position-fit</b> (PF) of a candidate. <br><br>
        The team compatibility (TC) is also rated on a scale of 0% to 100% and represents how well a candidate works in a team. This gives the <b>team-fit</b> (TF) of a candidate.
        <br><br>
        The <b>overall-fit</b> (OF) of a candidate is the team-fit multiplied with the position-fit. <br><br>
        OF = PF * TF
    </font>
    </p>

    <!-- Here we define the hidden fields for tracking the changes of the player's choices //-->
    <div id = "outputTeam"></div>
    <input type = "hidden" name = "current_team" id = "id_current_team"/>
    <input type = "hidden" name = "all_teams" id = "id_all_teams"/>

    </p>


    <!-- Here we include the formfields that are not presented to the player but used for the hidden input //-->
    {{ form.current_team.errors }}
    {{ form.all_teams.errors }}
    
    


{% endblock %}