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

<div class="container-fluid">
	<p>
		<a href="/pros" class="back-button btn btn-lg btn-success mb-4"><i class="fas fa-angle-left"></i> Back to Pros</a>
	</p>
	<div class="row">
		<div class="col-md-4">
			<div class="image-container">
				<img src=<%=pro.image%> class="profile-image img-fluid">
				<span class="image-credit">image credit: <%=pro.image_credit%></span>
			</div>
		</div>
		<div class="col-md-8">
			<h2 class="profile-name pb-2"><%=pro.name%></h2>
			<p><span class="pro-text pr-1">Rank: </span><span class="pro-text-entry"><%=pro.rank%></span></p>
			<p><span class="pro-text pr-1">Sponsor: </span><span class="pro-text-entry"><%=pro.sponsor%></span></p>
			<p><span class="pro-text pr-1">Bag update: </span><span class="pro-text-entry"><%=pro.last_bag_update%> <a href="<%=pro.inthebag_url%>" target="_blank"><i class="fab fa-youtube"></i></a></span></p>
		</div>
	</div>

	<div class="wrapper">
		<div class="table-responsive">
			<table class="table table-sm">
			  <thead>
				<tr>
				  <th scope="col">Category</th>
				  <th scope="col">Mold</th>
				  <th scope="col">Brand</th>
				  <th scope="col">Plastic</th>
				  <th scope="col">Weight</th>
				</tr>
			  </thead>
			  <tbody>
				<% pro.pro_discs.sort((a, b) => (a.disc.id.category > b.disc.id.category) ? 1 : (a.disc.id.category === b.disc.id.category) ? ((a.disc.id.mold > b.disc.id.mold) ? 1 : -1) : -1 ) %>
				<% pro.pro_discs.forEach(function(proDisc){ %>
					<tr>
					  <td class="cell category-cell"><%=proDisc.disc.id.category%></td>
					  <td class="cell"><a href="/discs/<%=proDisc.disc.id.mold%>" class="btn btn-info"><%=proDisc.disc.id.mold%></a></td>
					  <td class="cell"><%=proDisc.disc.id.brand%></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>
					<% if (currentUser){ %>  
					  <td>
						<form action="/pros/<%=pro.url_name%>/prodiscs/<%=proDisc._id%>?_method=DELETE" method="POST">
							<button class="btn btn-sm btn-danger">Delete</button>
						</form>
					  </td>
					<% } %> 	
					</tr>
				<% }) %>
			  </tbody>
			</table>
			<% if (currentUser){ %>  
				<a href="/pros/<%=pro.url_name%>/prodiscs/new" class="btn btn-primary">+ Add a disc to this pro's profile</a>
			<% } %>
		</div>
	</div>
</div>

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