<h1><%= @tournament.name %> - Matches</h1>


<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Status</th>
      <th>Winner</th>
      <th></th>
    </tr>
  </thead>

	<tbody class="table-hover">
		<% @tournament.matches.order(:id).reverse.each do |match| %><tr>
			<td><%= match.name %></td>
			<td><%= match.status %></td>
			<td><%= (match.winner.nil? ? "-" : "Team #{match.winner.id}") %></td>
			<td><%= link_to "Show", tournament_match_path(@tournament, match) %>
			<td> <%# If user is the host, let them start the tournment %>
				<% if @tournament.hosts.include?(current_user) %>
					<%= form_tag(tournament_match_path(@tournament, match), method: "put") do %>
						<input type="hidden" name="update_action" value="start">
						<% @startable = (match.status == 0) and (match.teams.count >= @tournament.min_teams_per_match) %>
						<%= submit_tag("Start Match", :disabled => ! @startable) %>
					<% end %>
				<% end %>
			</td>
		</tr><% end %>
	</tbody>
</table>

<br>

<div id="match-tree">
  <SVG version="1.1"
  baseProfile="full"
  width="100%" height="<%= @height = [@height, 500].max %>"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
     <% lastrx = 0
       lastry = 0 
       lastrh = 0
       lastrw = 0 %>
    <defs>
    <radialGradient id="gradMatch" cx="50%" cy="50%" r="80%" fx="80%" fy="80%">
      <stop offset="0%" style="stop-color:#ffd281;
      stop-opacity:0" />
      <stop offset="100%" style="stop-color:#ccc;stop-opacity:1" />
    </radialGradient>
  </defs>
   <script type="text/ecmascript"><![CDATA[
      function redirect(i){
        window.location.replace("<%= request.original_url %>"+"/"+i);
      }
    ]]>
  </script>
 
  <% (1..@matches.count).each do |i| %>
  <g id="svg-match-<%= i %>" onclick="redirect(<%= @matches[i-1].id %>)" cursor="pointer">
    <rect height="<%= rh = 100/(2**(@depth-1)+1) - 5 %>%" 
      width="<%= rw = 100/(@depth+1) - 5 %>%" 
      x="<%= rx = 50/(@depth+1) + 100/(@depth+1)*(@depth-(Math.log2(i).floor+1)) %>%"
      y="<%= ry = ( 100/(2**(Math.log2(i).floor)+1) + rh * 1.1 * (2**Math.log2(i).ceil-i)) %>%"
      fill="url(#gradMatch)"
      rx="5px"
      stroke-width="2"
      <% case @matches[i-1].status %>
      <% when 0 %>
        <% if @matches[i-1].teams.count < @tournament.min_teams_per_match %>
          stroke="red"
          fill-opacity="0.6"
        <% else %>
          stroke="green"
        <% end %>
      <% when 1 %>
      stroke="orange"
      <% when 2 %>
      stroke="yellow"
      <% when 3 %>
      stroke="grey"
      <% end %>
    />
    <rect width="<%= rw-5 %>%" height="<%= rh/4 %>%" x="<%= rx + 2.5 %>%" y="<%= ry + rh/6 %>%" fill="<%= @matches[i-1].teams.first and @matches[i-1].teams.first.users.include?(current_user) ? "#BCED91" : "white" %>"  />
    <text x="<%= rx + rw/4 %>%" y="<%= ry + rh/3 %>%" font-size="<%= rh %>">
      <% if @matches[i-1].teams.first %>
      Team <%= @matches[i-1].teams.first.id %>
      <% end %>
    </text>
    <text x="<%= rx + 1.3*rw/3  %>%" y="<%= ry + 5.2*rh/9 %>%" font-size="<%= rh %>"> VS </text>
    
     <rect width="<%= rw-5 %>%" height="<%= rh/4 %>%" x="<%= rx + 2.5 %>%" y="<%= ry + 3*rh/5 %>%" fill="<%= @matches[i-1].teams[1] and @matches[i-1].teams[1].users.include?(current_user) ? "#BCED91" : "white" %>" />
    <text x="<%= rx + rw/4 %>%" y="<%= ry + 4*rh/5 %>%" font-size="<%= rh %>">
      <% if @matches[i-1].teams[1] %>
         Team <%= @matches[i-1].teams[1].id %>
      <% end %>
    </text>
    <% if i > 1 %>
    <line x1="<%= rx+rw %>%" y1="<%= ry+rh/2 %>%" x2="<%= lastrx %>%" y2="<%= lastry+lastrh/2 %>%" stroke="black" stroke-width="2" >
    <% end %>
    <% if Math.log2(i+1) == Math.log2(i+1).ceil %>
      <% lastrx = rx
         lastry = ry 
        lastrh = rh
        lastrw = rw %>
    <% end %>
  </g>

  <% end %>
</SVG>
</div>