<html>
	<head>
		<title>Medium Marks</title>
		<style>
			body {
				margin: 0 auto;
				padding: 4rem;
				color: #222;
			}
			a {
				color: inherit;
				text-decoration: none;
			}
			.bm {
				border: 1px solid #ccc;
				border-radius: 0.25rem;
				margin: 1rem 0;
				background: #eee;
				padding: 0.7rem;
			}
			.btn {
				border: none;
				border-radius: 0.25rem;
				background: #00a181;
				color: #eee;
				padding: 0.5rem;
				margin: 0.25rem;
			}
			button[disabled] { background: #666; color: #fff; cursor: none;}
			.btn:hover, .btn:focus { cursor: pointer; }
			.stat { float: right; color: #555; font-style: italic; }
		</style>
	</head>
	<body>
		<span class="stat">Showing <%= list.length%> items</span>
		<span>Sort by</span>
		<button type="button" class="btn" onclick="sortBy(sort_az)">A-Z</button>
		<button type="button" class="btn" onclick="sortBy(sort_az)" disabled>Recent</button>
		<button type="button" class="btn" onclick="sortBy(sort_sf)">Shortest</button>
		<button type="button" class="btn" onclick="sortBy(sort_lf)">Longest</button>
		<div>
			<%for (let i=0; i<list.length; i++) { %>
				<div class="bm">
					<a href="<%=list[i].link%>">
						<h2><%=list[i].title%></h2>
						<p><%=list[i].desc%></p>
						<span><%=list[i].time_mins%> Mins</span>
					</a>
				</div>
			<% } %>
		</div>
	</body>
	<script>
	let list = document.getElementsByTagName("a");
	list = Array.from(list);
	function sortBy(sortFn) {
		list.sort(sortFn);
		for (var i = 0; i < list.length; i++) {
	        list[i].parentNode.parentNode.appendChild(list[i].parentNode);
	    }
	}
	const sort_az = (a, b) =>
	        a.firstElementChild.innerHTML.toLowerCase().localeCompare(b.firstElementChild.innerHTML.toLowerCase());

	const sort_sf = (a, b) => 
	        a.lastElementChild.innerHTML.localeCompare(b.lastElementChild.innerHTML, undefined, {numeric: true});

	const sort_lf = (a, b) => 
	        b.lastElementChild.innerHTML.localeCompare(a.lastElementChild.innerHTML, undefined, {numeric: true});
	</script>
</html>