<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>myBloog :: <%= page %></title>
		<link
			href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
			rel="stylesheet"
			integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
			crossorigin="anonymous"
		/>
		<link
			rel="stylesheet"
			href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css"
		/>
		<link rel="stylesheet" href="/styles/global.css"/>
	</head>

	<body>
    <%- include('./components/navbar.ejs') %>
		<!-- Main -->
		<div class="blogs">
			<% if (blogs.length != 0) { %>
				<% blogs.forEach(blog => { %>
					<%- include('./components/blog.ejs', { blog: blog, link: true }) %>
				<% }) %>
			<% } else {%>
				<h1 class="text-bg-dark">We havent blogs, you can be first <a href="/blog/create">Create your blog</a>.</h1>
				<% }%>

    </div>
	</body>

	<script
		src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
		integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
		crossorigin="anonymous"
	></script>
	<script
		src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
		integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
		crossorigin="anonymous"
	></script>

	<script src="/scripts/index.js"></script>
</html>
