{{ block title }}
Voting and Live Coordination
{{ endblock }}
{{ block content }}
<style>
u {
  text-decoration: underline;
}
</style>
<p>
    You can see three proposals for the decision-making list. You are the Participant {{player.id_in_group}}.
    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 proposal and voting. Cast your vote for one of the three proposals.
    The decision will be made by <u><strong>a majority vote</strong></u>, meaning that at least <u><strong>2 out of the 3</strong></u>
    participants must agree on one of the three proposals.
</p>
<p>
    Note that "Option A" represents not making an investment (safe and soon) and "Option B" represents making an
    investment (risky and four weeks later).
</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"><strong>Option A <BR>(Safe & Soon)</strong></td>
           <td style="text-align:center">Result</td>
           <td style="text-align:center"><strong>Option B <BR>(Risky & Four weeks later)</strong></td>

           {{for p in other_players}}
           <td style="text-align:center; font-size: 16px">No.</td>
           <td style="text-align:center"><strong>Option A <BR>(Safe & Soon)</strong></td>
           <td style="text-align:center">Result</td>
           <td style="text-align:center"><strong>Option B <BR>(Risky & Four weeks later)</strong></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% four weeks later</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% four weeks later</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% four weeks later</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% four weeks later</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% four weeks later</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% four weeks later</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% four weeks later</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% four weeks later</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% four weeks later</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% four weeks later</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% four weeks later</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% four weeks later</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% four weeks later</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% four weeks later</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% four weeks later</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% four weeks later</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% four weeks later</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% four weeks later</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% four weeks later</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% four weeks later</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>

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

<table class="table table-striped">
    <tr>
        <th>Proposal</th>
        <th>My vote</th>
        <th>Voters</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>
    </tr>
    {{ endfor }}
</table>
<h4>Undecided players</h4>
<ul id="undecided" class="clear-on-redraw"></ul>

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

    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] 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>`;
            }
        }
    }

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

</script>



{{ next_button }}

{{ endblock }}