{{ extends "otree/Page.html" }}
{{ load otree }}

{{ block title }}
    Vote Results
{{ endblock }}

{{ block content}}

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-0lax{text-align:left;vertical-align:top}
</style>

<p>
    Voting has been completed. The tally of votes can be found below:
</p>

<table class="tg">
<thead>
  <tr>
    <th class="tg-0lax">Votes for Group Member 1</th>
    <th class="tg-0lax">Votes for Group Member 2</th>
    <th class="tg-0lax">Votes for Group Member 3</th>
    <th class="tg-0lax">Votes for Group Member 4</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="tg-0lax">{{votes_1}}</td>
    <td class="tg-0lax">{{votes_2}}</td>
    <td class="tg-0lax">{{votes_3}}</td>
    <td class="tg-0lax">{{votes_4}}</td>
  </tr>
</tbody>
</table>

<p>
    You are Group Member {{player.id_in_group}}.
</p>

<p>
    {% if ((votes_1 > votes_2) and (votes_1 > votes_3) and (votes_for_1 > votes_4)) or ((votes_2 > votes_1) and (votes_2 > votes_3) and (votes_for_2 > votes_4)) or ((votes_3 > votes_2) and (votes_3 > votes_1) and (votes_for_3 > votes_4)) or ((votes_4 > votes_2) and (votes_4 > votes_3) and (votes_for_4 > votes_1))%}
    Group member {{ winner }},the player with the most votes, has been elected. {% else %} Multiple group members tied for the highest vote tally. Group member {{ winner }} was chosen at random to be the leader. {% endif %}
</p>

{{ endblock }}

{{ block global_styles  }}
{{ endblock }}
{{ block global_scripts  }}
{{ endblock }}