{{ block title }}
Voting and Live Communication
{{ endblock }}
{{ block content }}
<style>
u {
  text-decoration: underline;
}
</style>
<p>
    You can see three proposals for the decision-making list. You are the <strong>Participant {{player.id_in_group}}</strong>.
    The left list is your own proposal made in this round. The other lists are the proposals made by your teammates.
</p>
<p>
    Take the time to review and compare your own proposal to those made by your teammates. You can communicate with your
    teammates through the computer chat to discuss the proposals and voting. When you are ready, cast your vote for one of the three proposals.
    <strong>Participant {{player.id_in_group}}</strong> (me) has {{player.weight}} out of four votes.
    {{ for p in other_players }}
    <strong>Participant {{ p.id_in_group }}</strong> has {{p.weight}} out of four votes.
    {{ endfor }}
    The decision will be made by <u><strong>a majority vote</strong></u>, meaning that at least <u><strong>2/3 (67%)</strong></u> votes
    must agree on one of the three proposals. In other words, the group must agree on one proposal with at least 3 votes.

</p>
<p>
    Note that "Option A" represents not making an investment and "Option B" represents making an investment.
</p>
<p>
    After voting, click "Next" to continue the experiment.
</p>
<style>
table, th, td {
  border:1px solid black;
}
td{
  font-size: 12px;
}
</style>
   <table style="width:140%;margin-top:20px; margin-left:-160px" ; class="center">
       <colgroup>
           <col span="1" style="white">
           <col span="3" style="background-color: #D6EEEE">
           <col span="4" style="background-color: pink">
           <col span="4" style="background-color: yellow">
       </colgroup>
       <tr>
           <td style="text-align:center"></td>
           <td colspan="3" style="text-align:center ; font-size: 20px">Participant {{ player.id_in_group }} (me)</td>
           {{ for p in other_players }}
           <td colspan="4" style="text-align:center ; font-size: 20px">Participant {{ p.id_in_group }}</td>
           {{ endfor }}
       </tr>

       <tr>
           <td style="text-align:center; font-size: 16px">No.</td>
           <td style="text-align:center">Option A</td>
           <td style="text-align:center">Result</td>
           <td style="text-align:center">Option B</td>

           {{for p in other_players}}
           <td style="text-align:center; font-size: 16px">No.</td>
           <td style="text-align:center">Option A</td>
           <td style="text-align:center">Result</td>
           <td style="text-align:center">Option B</td>
           {{  endfor }}
       </tr>
       <tr>
           <td style="text-align:center; font-size: 16px">1.</td>
           <td style="text-align:center">8.0 points with 100% tomorrow</td>
           <td style="text-align:center">{{ player.r1 }}</td>
           <td style="text-align:center">12.0 points with 10%, otherwise 4.0 points with 90% tomorrow</td>

           {{for p in other_players}}
           <td style="text-align:center; font-size: 16px">1.</td>
           <td style="text-align:center">8.0 points with 100% tomorrow</td>
           <td style="text-align:center">{{ p.r1 }}</td>
           <td style="text-align:center">12.0 points with 10%, otherwise 4.0 points with 90% tomorrow</td>
           {{  endfor }}
       </tr>
       <tr>
           <td style="text-align:center; font-size: 16px">2.</td>
           <td style="text-align:center">8.0 points with 100% tomorrow</td>
           <td style="text-align:center">{{ player.r2 }}</td>
           <td style="text-align:center">12.0 points with 20%, otherwise 4.0 points with 80% tomorrow</td>

           {{for p in other_players}}
           <td style="text-align:center; font-size: 16px">2.</td>
           <td style="text-align:center">8.0 points with 100% tomorrow</td>
           <td style="text-align:center">{{ p.r2 }}</td>
           <td style="text-align:center">12.0 points with 20%, otherwise 4.0 points with 80% tomorrow</td>
           {{  endfor }}
       </tr>
       <tr>
           <td style="text-align:center; font-size: 16px">3.</td>
           <td style="text-align:center">8.0 points with 100% tomorrow</td>
           <td style="text-align:center">{{ player.r3 }}</td>
           <td style="text-align:center">12.0 points with 30%, otherwise 4.0 points with 70% tomorrow</td>

           {{for p in other_players}}
           <td style="text-align:center; font-size: 16px">3.</td>
           <td style="text-align:center">8.0 points with 100% tomorrow</td>
           <td style="text-align:center">{{ p.r3 }}</td>
           <td style="text-align:center">12.0 points with 30%, otherwise 4.0 points with 70% tomorrow</td>
           {{  endfor }}
       </tr>
       <tr>
           <td style="text-align:center; font-size: 16px">4.</td>
           <td style="text-align:center">8.0 points with 100% tomorrow</td>
           <td style="text-align:center">{{ player.r4 }}</td>
           <td style="text-align:center">12.0 points with 40%, otherwise 4.0 points with 60% tomorrow</td>

           {{for p in other_players}}
           <td style="text-align:center; font-size: 16px">4.</td>
           <td style="text-align:center">8.0 points with 100% tomorrow</td>
           <td style="text-align:center">{{ p.r4 }}</td>
           <td style="text-align:center">12.0 points with 40%, otherwise 4.0 points with 60% tomorrow</td>
           {{  endfor }}
       </tr>
       <tr>
           <td style="text-align:center; font-size: 16px">5.</td>
           <td style="text-align:center">8.0 points with 100% tomorrow</td>
           <td style="text-align:center">{{ player.r5 }}</td>
           <td style="text-align:center">12.0 points with 50%, otherwise 4.0 points with 50% tomorrow</td>

           {{for p in other_players}}
           <td style="text-align:center; font-size: 16px">5.</td>
           <td style="text-align:center">8.0 points with 100% tomorrow</td>
           <td style="text-align:center">{{ p.r5 }}</td>
           <td style="text-align:center">12.0 points with 50%, otherwise 4.0 points with 50% tomorrow</td>
           {{  endfor }}
       </tr>
       <tr>
           <td style="text-align:center; font-size: 16px">6.</td>
           <td style="text-align:center">8.0 points with 100% tomorrow</td>
           <td style="text-align:center">{{ player.r6 }}</td>
           <td style="text-align:center">12.0 points with 60%, otherwise 4.0 points with 40% tomorrow</td>

           {{for p in other_players}}
           <td style="text-align:center; font-size: 16px">6.</td>
           <td style="text-align:center">8.0 points with 100% tomorrow</td>
           <td style="text-align:center">{{ p.r6 }}</td>
           <td style="text-align:center">12.0 points with 60%, otherwise 4.0 points with 40% tomorrow</td>
           {{  endfor }}
       </tr>
       <tr>
           <td style="text-align:center; font-size: 16px">7.</td>
           <td style="text-align:center">8.0 points with 100% tomorrow</td>
           <td style="text-align:center">{{ player.r7 }}</td>
           <td style="text-align:center">12.0 points with 70%, otherwise 4.0 points with 30% tomorrow</td>

           {{for p in other_players}}
           <td style="text-align:center; font-size: 16px">7.</td>
           <td style="text-align:center">8.0 points with 100% tomorrow</td>
           <td style="text-align:center">{{ p.r7 }}</td>
           <td style="text-align:center">12.0 points with 70%, otherwise 4.0 points with 30% tomorrow</td>
           {{  endfor }}
       </tr>
       <tr>
           <td style="text-align:center; font-size: 16px">8.</td>
           <td style="text-align:center">8.0 points with 100% tomorrow</td>
           <td style="text-align:center">{{ player.r8 }}</td>
           <td style="text-align:center">12.0 points with 80%, otherwise 4.0 points with 20% tomorrow</td>

           {{for p in other_players}}
           <td style="text-align:center; font-size: 16px">8.</td>
           <td style="text-align:center">8.0 points with 100% tomorrow</td>
           <td style="text-align:center">{{ p.r8 }}</td>
           <td style="text-align:center">12.0 points with 80%, otherwise 4.0 points with 20% tomorrow</td>
           {{  endfor }}
       </tr>
       <tr>
           <td style="text-align:center; font-size: 16px">9.</td>
           <td style="text-align:center">8.0 points with 100% tomorrow</td>
           <td style="text-align:center">{{ player.r9 }}</td>
           <td style="text-align:center">12.0 points with 90%, otherwise 4.0 points with 10% tomorrow</td>

           {{for p in other_players}}
           <td style="text-align:center; font-size: 16px">9.</td>
           <td style="text-align:center">8.0 points with 100% tomorrow</td>
           <td style="text-align:center">{{ p.r9 }}</td>
           <td style="text-align:center">12.0 points with 90%, otherwise 4.0 points with 10% tomorrow</td>
           {{  endfor }}
       </tr>
       <tr>
           <td style="text-align:center; font-size: 16px">10.</td>
           <td style="text-align:center">8.0 points with 100% tomorrow</td>
           <td style="text-align:center">{{ player.r10 }}</td>
           <td style="text-align:center">12.0 points with 100%, otherwise 4.0 points with 0% tomorrow</td>

           {{for p in other_players}}
           <td style="text-align:center; font-size: 16px">10.</td>
           <td style="text-align:center">8.0 points with 100% tomorrow</td>
           <td style="text-align:center">{{ p.r10 }}</td>
           <td style="text-align:center">12.0 points with 100%, otherwise 4.0 points with 0% tomorrow</td>
           {{  endfor }}
       </tr>
   </table>

<p>

</p>
<h4>Computer Chat</h4>
{{ chat }}

<table>
    <tr>
        <th style="border-style: hidden; height:50px"></th>
    </tr>
    <tr>
        <th style="border-style: hidden; font-size: 25px">Voting</th>
    </tr>
    <tr>
    </tr>

        <th style="border-style: hidden; height:20px"></th>
    </tr>
</table>

    <p>
    "Proposal" displays all proposals by team members. You could choose one of proposals from "My vote" and see the corresponding voters from "Voters".
        "Voting result" will display the number of votes for each proposal. Note: The decision can be reached only if one proposal is agreed on at least 3 votes out of four.
    </p>


<table class="table table-striped">
    <tr>
        <th>Proposal</th>
        <th>My vote</th>
        <th>Voters</th>
        <th>Voting result</th>
    </tr>
    {{ for choice in C.CHOICES }}
    <tr>
        <th>The Proposal of Participant {{ choice }}</th>
        <td>
            <input type="radio" name="my-vote" value="{{ choice }}" id="radio-{{ choice }}" onclick="vote(this)">
        </td>
        <td>
            <ul id="votes-for-{{ choice }}" class="clear-on-redraw"></ul>
        </td>
        <td>
            <ul id="votes2-for-{{ choice }}" class="clear-on-weight"></ul>
        </td>
    </tr>
    {{ endfor }}
</table>
<h4>Undecided players</h4>
<ul id="undecided" class="clear-on-redraw"></ul>

<script>
    let redrawableNodes = document.getElementsByClassName('clear-on-redraw');
    let redrawableNodes2 = document.getElementsByClassName('clear-on-weight');

    function vote(btn) {
        liveSend({vote: parseInt(btn.value)});
    }

    function liveRecv(data) {
        if ('finished' in data) {
            document.getElementById('form').submit();
        }

        if ('votes' in data) {
            for (let ele of redrawableNodes) {
                ele.innerHTML = '';
            }
            for (let [id_in_group, vote, weight_ind] of data.votes) {
                let playerName = `Participant ${id_in_group}`;
                let isMe = id_in_group === js_vars.my_id;
                let isNull = vote === null;
                if (isMe) {
                    playerName += ' (me)';
                    if (!isNull) {
                        document.getElementById(`radio-${vote}`).checked = true;
                    }
                }
                let bulletListId = isNull ? 'undecided' : `votes-for-${vote}`;
                let bulletList = document.getElementById(bulletListId);
                bulletList.innerHTML += `<li>${playerName}</li>`;
            }
        }
        if ('votes' in data) {
            for (let wlw of redrawableNodes2) {
                 wlw.innerHTML = '';
            }
            for (let [id_in_group, vote, weight_ind] of data.votes) {
                let playerName = `${weight_ind}`;
                let isMe = id_in_group === js_vars.my_id;
                let isNull = vote === null;
                if (isMe) {
                    playerName += ' (me)';
                    if (!isNull) {
                        document.getElementById(`radio-${vote}`).checked = true;
                    }
                }
                let bulletListId = isNull ? 'undecided' : `votes2-for-${vote}`;
                let bulletList = document.getElementById(bulletListId);
                bulletList.innerHTML += `<li>${playerName}</li>`;
            }
        }
    }

    document.addEventListener("DOMContentLoaded", function (event) {
        liveSend({});
    });

</script>



{{ next_button }}

{{ endblock }}