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

{% block title %}
    Switch Voting
{% endblock %}

{% block content %}
  <p>
		Your group must vote on if another player can join your team.
  </p>
  <div class="card">
	<div class="card-header"><h5>Note:</h5></div>
	<div class="card-body">
	  <ol>
			<li>The max team size is {{ Constants.max_players_in_team }}</li>
			<li>This screen will not show if you have the max number of players</li>
			<li>If your team attempts to vote more people in than free spots available:</li>
			<ul>
				<li>The people with the most votes for will be chosen first</li>
				<li>The remaining spots will be given randomly to those who were voted in</li>
			</ul>
	  </ol>
	</div>
  </div>
  <br>
  {% if group.get_other_sdp_size > 0 %}
  <div class="card">
	<div class="card-header"><h5>Request(s) to join:</h5></div>
	<div class="card-body">
		<table class="table">
			<tr>
				<th>Player ID</th>
				<th>Average Contribution</th>
				<th>Vote them in?</th>
			</tr>
			{% for player in group.get_other_sdp %}
			<tr>
				<td>{{player.participant_id}}</td>
				<td>{{player.get_average_contribution}}</td>
				<td>Yes <input class="positive" id="test" name="vote{{player.participant_id}}" type="radio" value="{{player.participant_id}}"> | No <input name="vote{{player.participant_id}}" type="radio" value=""></td>
			</tr>
			{% endfor %}
		</table>
	</div>
  </div>
  {% else %}
  <p><b>There is nothing to vote on this round.</b></p>
  {% endif %}
	<br>
  <input id="vote" type="hidden" name="voted_for_players" value="-1">
  <script>
		var value = "";
		$('input').on('click', function() {
			//console.log("It worked...", value);
			value = "";
			checked = $('input[class="positive"]:checked');
			//console.log(checked.length);
			if (checked.length > 1) {
				for (var x = 0; x < checked.length; x++){
					if (checked.eq(x).val() != "")
						value += checked.eq(x).val();
					if (x + 1 != checked.length)
						value += ",";
				}
			} else if (checked.length == 1) {
				value = checked.val();
			}
			if (value == ""){
				$('#vote').val("-1")
			} else {
				$('#vote').val(value);
			}
			console.log("Vote value is now:", $('#vote').val());
		});
  </script>

  {% chat %}

  {% next_button %}

{% endblock %}