<!DOCTYPE html>
<html>
<head>
	<%- include("../_includes/global_head.ejs") -%>
	<title>Blog - XZANSite</title>
</head>

<body>
	<%- include("../_includes/navbar.ejs") %>

	<main class="container">
		<div class="row gy-5">
			<style>
				.blog-list > h3{
					margin-top: 0.5em;
					margin-bottom: 1em;
				}
				.blog-list > div{
					padding-left: 1rem;
				}
				.blog-list > div > a{
					margin-bottom: 1em;
				}	
			</style>

			<section class="col-12 blog-list">
				<% for(article of articles){ %>
				<h3><%= article[0] %></h3>
				<% for(title of article[1]){ %>
				<div style="display: flex; justify-content: space-between;">
					<a href="/blog/<%= article[0] %>/<%= title %>"><%= title.replaceAll("_", " ") %></a>
				</div>
				<% } %>
				<% } %>
			</section>
		</div>
	</main>
</body>
</html>