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

<div class="container-fluid px-5">
	
	<header class="jumbotron text-center p-1 align-middle">
		<h2>
			Welcome! Select a disc below to see the pros who use it.
		</h2>
	</header>
	
	<div class="row">
		<div class="col-md col-sm-12">
			<div class="sort-controls mr-4">
				<span id="sort" class="pr-2">Sort by</span>
				<button type="button" class="mixitup-control control btn-sm" id="control1" data-sort="default:asc">Popularity Rank</button>
				<button type="button" class="mixitup-control control btn-sm" id="control2" data-sort="alphabet:asc">A-Z</button>
			</div>
		</div>

		<div class="col-12 mt-4">
			<div class="filter-controls">
				<span id="filter" class="pr-2">Filter by</span>
				<div class="dropdown inline-filter">
					<button class="btn-sm dropdown-toggle brand-filter" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						All Brands
					</button>
					<div class="dropdown-menu brand-dropdown">
						<button type="button" class="dropdown-item" value="All">All Brands</button>
						<button type="button" class="dropdown-item" value="Axiom">Axiom</button>
						<button type="button" class="dropdown-item" value="Discmania">Discmania</button>
						<button type="button" class="dropdown-item" value="Discraft">Discraft</button>
						<button type="button" class="dropdown-item" value="Dynamic">Dynamic Discs</button>
						<button type="button" class="dropdown-item" value="Infinite">Infinite Discs</button>
						<button type="button" class="dropdown-item" value="Innova">Innova</button>
						<button type="button" class="dropdown-item" value="Latitude">Latitude 64</button>
						<button type="button" class="dropdown-item" value="MVP">MVP</button>
						<button type="button" class="dropdown-item" value="Prodigy">Prodigy</button>
						<button type="button" class="dropdown-item" value="Streamline">Streamline</button>
						<button type="button" class="dropdown-item" value="Westside">Westside Discs</button>
					</div>
				</div>

				<div class="dropdown inline-filter">
					<button class="btn-sm dropdown-toggle category-filter" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						All Types
					</button>
					<div class="dropdown-menu category-dropdown">
						<button type="button" class="dropdown-item" value="All">All Types</button>
						<button type="button" class="dropdown-item" value="Dist">Distance Drivers</button>	
						<button type="button" class="dropdown-item" value="Fair">Fairway Drivers</button>
						<button type="button" class="dropdown-item" value="Midr">Midranges</button>
						<button type="button" class="dropdown-item" value="Putt">Putters</button>
					</div>
				</div>
				
				<div class="dropdown inline-filter">
					<button class="btn-sm dropdown-toggle stability-filter" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						All Stabilities
					</button>
					<div class="dropdown-menu stability-dropdown">
						<button type="button" class="dropdown-item" value="All">All Stabilities</button>
						<button type="button" class="dropdown-item" value="Overstable">Overstable</button>	
						<button type="button" class="dropdown-item" value="Stable">Stable</button>
						<button type="button" class="dropdown-item" value="Understable">Understable</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="row text-center discs-index-container mt-5">
		<% discs.sort((a, b) => (a.popularity_rank > b.popularity_rank) ? 1 : -1) %>
		<% discs.forEach(function(disc){ %>
			<div class="col-lg-3 col-4 disc-card mix <%=disc.brand%> <%=disc.category.substring(0, 4)%> <%=helper.categorizeStability(disc)%>" data-alphabet="<%=disc.mold%>">
				<a href="/discs/<%=disc.mold%>">
					<div class="card mb-md-4 mb-2">
						<img src=<%=disc.image%> class="card-img-top">
						<div class="card-body">
							<h5 class="card-title"><%=disc.mold%></h5>
							<h5 class="card-subtitle"><%=disc.brand%></h5>
						</div>
					</div>
				</a>
			</div>
		<% }) %>		
	</div>
</div>
	
	
<%- include("../partials/footer") %>
