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

<div class="container-fluid px-5">
	
	<header class="jumbotron text-center p-1 align-middle">
		<h2>
			Welcome! Select a pro below to see the discs in their bag.
		</h2>
	</header>
	
	<div class="row justify-content-center mb-4">
		<div>
			<div class="sort-controls">
				<button type="button" class="mixitup-control control btn-sm" id="control3" data-filter=".gender-m">MPO</button>
				<button type="button" class="mixitup-control control btn-sm" id="control4" data-filter=".gender-f">FPO</button>
			</div>
		</div>
	</div>
	
	<div class="row text-center pros-index-container">
		<% pros.sort((a, b) => (a.rank > b.rank) ? 1 : -1) %>
		<% pros.forEach(function(pro){ %>
			<div class="col-lg-3 col-4 pro-card mix gender-<%=pro.gender%>">
				<a href="/pros/<%=pro.url_name%>">
					<div class="card mb-md-4 mb-2">
						<img src=<%=pro.image%> class="card-img-top">
						<div class="card-body">
							<h5 class="card-title"><%=pro.name%></h5>
						</div>
					</div>
				</a>
			</div>
		<% }) %>
	</div>
	<div class="pt-5" style="text-align: center">
		More pros coming soon...
	</div>
</div>
	
	
<%- include("../partials/footer") %>
