<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Home - LiteLib</title>
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
		<link rel="stylesheet" href="/css/style.css">

		<!-- Favicon Information -->
		<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
		<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
		<link rel="icon" type="image/png" sizes="194x194" href="/favicon/favicon-194x194.png">
		<link rel="icon" type="image/png" sizes="192x192" href="/favicon/android-chrome-192x192.png">
		<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
		<link rel="manifest" href="/favicon/site.webmanifest">
		<link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#805a3f">
		<link rel="shortcut icon" href="/favicon/favicon.ico">
		<meta name="msapplication-TileColor" content="#ffffff">
		<meta name="msapplication-TileImage" content="/favicon/mstile-144x144.png">
		<meta name="msapplication-config" content="/favicon/browserconfig.xml">
		<meta name="theme-color" content="#ffffff">
	</head>
	<body style="text-align:center;">
		<!--<h1 class="mt-5 mb-5">LiteLib</h1>-->
		<div>
			<a href="/"><img src="/img/logo.png" alt="LiteLib" class="img-fluid" style="width: 192px; height: 192px;"></a>
		</div>

		<% if (user) { %>
			<h1>Welcome <%= user.name %></h1>

		<div class="d-grid gap-2 col-5 mx-auto">
				<a href="/books" class="btn btn-primary btn-lg mt-5"><i class="bi bi-book-fill"></i> Books</a>

			<% if (user.role == "admin") { %>
				<a href="/users" class="btn btn-primary btn-lg mt-5"><i class="bi bi-people-fill"></i> Users</a>

				<a href="/dashboard" class="btn btn-primary btn-lg mt-5"><i class="bi bi-toggles"></i> Dashboard</a>
			<% } %>

			<% if (user.role != "basic") { %>
				<a href="/settings" class="btn btn-primary btn-lg mt-5"><i class="bi bi-gear-wide-connected"></i> Settings</a>
			<% } %>

			<a href="/logout" class="btn btn-primary btn-lg mt-5"><i class="bi bi-box-arrow-left"></i> Logout</a>
		</div>
		<% } else { %>
			<h1 class="mt-5 mb-5">LiteLib</h1>

			<div class="d-grid gap-2 col-5 mx-auto">
				<a href="/signin" class="btn btn-primary btn-lg mt-5"><i class="bi bi-box-arrow-right"></i> Sign-In</a>
			</div>

			<script>
				// JavaScript to redirect on Enter key press
				document.addEventListener('keypress', function(event) {
					if (event.key === 'Enter') {
						event.preventDefault(); // Prevent the default action of the Enter key
						window.location.href = "/signin";
					}
				});
			</script>
		<% } %>
	
		<% if (user) { %>
			<% if (user.role != "basic") { %>
				<div class="d-grid gap-2 col-5 mx-auto">
					<a href="https://github.com/cs340-24/LiteLib" class="btn btn-dark btn-lg mt-5"><i class="bi bi-github"></i> GitHub</a>
				</div>
			<% } %>
		<% } %>

		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
	</body>
</html>
