<%- include("../partials/header") %>

<div class="container-fluid px-5">
	<p>
		<a href="/discs" class="back-button btn btn-lg btn-success mb-4"><i class="fas fa-angle-left"></i> Back to Discs</a>
	</p>
	<div class="float-left pr-5 mt-3">
		<img src=<%=disc.image%> class="profile-image">
	</div>
	<div class="float-left">
		<h2 class="profile-name pb-2"><%=disc.mold%></h2>
		<p><span class="disc-text pr-1">Brand: </span><span class="disc-text-entry"><%=disc.brand%></span></p>
		<p><span class="disc-text pr-1">Category: </span><span class="disc-text-entry"><%=disc.category%></span></p>
		<p><span class="disc-text pr-1">Flight numbers: </span><span class="disc-text-entry"><%=disc.speed%> | <%=disc.glide%> | <%=disc.turn%> | <%=disc.fade%></span></p>
		<p><span class="disc-text pr-1 pop-rank" data-toggle="tooltip" data-placement="bottom" data-html="true" title="Based on the number of pros bagging the disc and the rankings of those pros.">Popularity Rank:</span><span class="disc-text-entry"> <%= helper.ordinal_suffix_of(disc.popularity_rank) %></span>
		</p>
	</div>

	<div class="wrapper">
		<div class="mb-3">
			<h1>
				Pros using this disc
			</h1>
		</div>
		<div>
			<table class="table-sm">
			  <thead>
				<tr>
				  <th scope="col">Name</th>
				  <th scope="col">Plastic</th>
				  <th scope="col">Weight</th>
				</tr>
			  </thead>
			  <tbody>
				  <!-- for each pro see if they have any prodiscs matching the disc -->
				<% pros.sort((a, b) => (a.rank > b.rank) ? 1 : -1) %>
				<% pros.forEach(function(pro){ %>
				  	<% pro.pro_discs.forEach(function(proDisc){ %>
						<% if(proDisc.disc.id._id == disc.id){ %>
							<tr>
							  <td class="cell"><a href="/pros/<%=pro.url_name%>" class="btn btn-info"><%=pro.name%></a></td>
							  <td class="cell"><%=proDisc.plastic%></td>
							  <% if (proDisc.weight){ %>  
								<td class="cell"><%=proDisc.weight%>g</td>
					  		  <% } else { %>
					  			<td class="unknown cell">unknown</td>
					  		  <% } %>
							  <td><a href="<%=proDisc.buy_url%>" class="btn btn-sm btn-light">Buy <i class="fas fa-external-link-alt"></i></a></td>
							</tr>
				  		<% } %>
				  	<% }) %>
				<% }) %>
			  </tbody>
			</table>
		</div>
	</div>
</div>

<%- include("../partials/footer") %>
