<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> <%= settings["WebsiteName"].Value %> || Leaderboard</title>
	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">


</head>
<body>
	<section class="main-content">
		<div class="container">
			<div class="row">
				<% if (members[0]){%>
					<div class="col-sm-4 order-sm-2">
						<div class="leaderboard-card leaderboard-card--first">
							<div class="leaderboard-card__top">
								<h3 class="text-center">1</h3>
							</div>
							<div class="leaderboard-card__body">
								<div class="text-center">
									<img src="/profiles/<%= members[0].Member.Photo%>" class="circle-img mb-3" alt="Member Img">
									<h5 class="mb-0"><%= members[0].Member.Name%></h5>
									<p class="text-muted mb-0"><%= members[0].Member.Committee%></p>
								</div>
							</div>
						</div>
					</div>
				<% }%>
				<% if (members[1]){%>
				<div class="col-sm-4 order-sm-1">
					<div class="leaderboard-card leaderboard-card--second">
						<div class="leaderboard-card__top">
							<h3 class="text-center">2</h3>
						</div>
						<div class="leaderboard-card__body">
							<div class="text-center">
								<img src="/profiles/<%= members[1].Member.Photo%>" class="circle-img mb-3" alt="Member Img">
								<h5 class="mb-0"><%= members[1].Member.Name%></h5>
								<p class="text-muted mb-0"><%= members[1].Member.Committee%></p>

							</div>
						</div>
					</div>
				</div>
				<% }%>
				<% if (members[2]){%>
				<div class="col-sm-4 order-sm-3">
					<div class="leaderboard-card leaderboard-card--third">
						<div class="leaderboard-card__top">
							<h3 class="text-center">3</h3>
						</div>
						<div class="leaderboard-card__body">
							<div class="text-center">
								<img src="/profiles/<%= members[2].Member.Photo%>" class="circle-img mb-3" alt="Member Img">
								<h5 class="mb-0"><%= members[2].Member.Name%></h5>
								<p class="text-muted mb-0"><%= members[2].Member.Committee%></p>
							</div>
						</div>
					</div>
				</div>
				<% }%>
			</div>
			<h4>Current Ranking</h4>

			<table class="table">
				<thead>
					<tr>
						<th>Name</th>
						<th>Ranking</th>
						<th>Team</th>
					</tr>
				</thead>
				<tbody>
				<% members.forEach(mem=>{%>
					<tr>
						<td>
							<div class="d-flex align-items-center">
								<img src="/profiles/<%=mem.Member.Photo%>" class="circle-img circle-img--small mr-2" alt="User Img">
								<div class="user-info__basic">
									<h5 class="mb-0"><%=mem.Member.Name%></h5>
									<p class="text-muted mb-0"></p>
								</div>
							</div>
						</td>
						<td>
							<div class="d-flex align-items-baseline">
								<h4 class="mr-1"><%=mem.Ranking%></h4>
<!--								<small class="text-success"><i class="fa fa-arrow-up"></i>+5</small>-->
							</div>
						</td>
						<td><%= mem.Member.Committee%></td>
					</tr>
				<%})%>
				</tbody>
			</table>
		</div>
	</section>
	<div class="running-pikachu">
		<div class="pikachu-holder">
			<div class="pikachu-inner">
				<div class="frame-0">
					<div class="tail"></div>
					<div class="holder"></div>
					<div class="tail2"></div>
					<div class="body"></div>
					<div class="body2"></div>
					<div class="legs-front"></div>
					<div class="legs-rear1"></div>
					<div class="legs-rear2"></div>
					<div class="under"></div>
					<div class="ear1"></div>
					<div class="ear1-filler"></div>
					<div class="ear2"></div>
					<div class="ear2-filler"></div>
					<div class="eyes-cheek"></div>
					<div class="nose-mouth"></div>
				</div>

				<div class="frame-1">
					<div class="tail"></div>
					<div class="holder"></div>
					<div class="tail2"></div>
					<div class="body"></div>
					<div class="legs-front"></div>
					<div class="legs-rear1"></div>
					<div class="legs-rear2"></div>
					<div class="under"></div>
					<div class="ear1"></div>
					<div class="ear1-filler"></div>
					<div class="ear2"></div>
					<div class="ear2-filler"></div>
					<div class="eyes-cheek"></div>
					<div class="nose-mouth"></div>
				</div>
				<div class="frame-2">
					<div class="tail"></div>
					<div class="holder"></div>
					<div class="tail2"></div>
					<div class="body"></div>
					<div class="legs-front"></div>
					<div class="legs-rear1"></div>
					<div class="legs-rear2"></div>
					<div class="under"></div>
					<div class="ear1"></div>
					<div class="ear1-filler"></div>
					<div class="ear2"></div>
					<div class="ear2-filler"></div>
					<div class="eyes-cheek"></div>
					<div class="nose-mouth"></div>
				</div>
				<div class="frame-3">
					<div class="tail"></div>
					<div class="holder"></div>
					<div class="tail2"></div>
					<div class="body"></div>
					<div class="body2"></div>
					<div class="legs-front"></div>
					<div class="legs-rear1"></div>
					<div class="legs-rear2"></div>
					<div class="under"></div>
					<div class="ear1"></div>
					<div class="ear1-filler"></div>
					<div class="ear2"></div>
					<div class="ear2-filler"></div>
					<div class="eyes-cheek"></div>
					<div class="nose-mouth"></div>
				</div>
			</div>
		</div>
	</div>
	<script src="/plugins/jquery/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>