<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Checked Out by <%= name %> - 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>
		<% if(message) { %>
			<div class="container mt-5">
			  <div class="alert alert-primary alert-dismissible" role="alert">
				<%= message %>
				<button id="removeMessageButton" type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
			  </div>
			</div>
		  <% } %>

		<div class="container mt-5 text-center">
			<h1>Checked Out by <%= name %> (<%= username %>)</h1>
		</div>

		<div class="container mt-5">
			<% if (user.checkout.length === 0) { %>
				<h2 class="text-center">No Books Checked Out</h2>
			<% } else { %>
				<div class="table-responsive">
					<table class="table table-bordered text-center">
						<thead>
							<tr>
								<th>ID</th>
								<th>Name</th>
								<th>Author</th>
								<th>Year</th>
								<th>Genre</th>
								<th>ISBN</th>
								<th>ISBN10</th>
								<th>Actions</th>
							</tr>
						</thead>
						<tbody>
							<% user.checkout.forEach((book, index) => { %>
								<tr>
									<td><%= index + 1 %></td>
									<td><%= books.get(book).name %></td>
									<td><%= books.get(book).author %></td>
									<td><%= books.get(book).year %></td>
									<td><%= books.get(book).genre %></td>
									<td><%= books.get(book).ISBN %></td>
									<td><%= books.get(book).ISBN10 %></td>
									<td>
										<a href="/return?bookID=<%= book %>&otherUser=<%= encodeURIComponent(username) %>" class="btn btn-warning btn-lg"><i class="bi bi-basket-fill"></i> Force Return</a>
									</td>
								</tr>
							<% }); %>
						</tbody>
					</table>
				</div>
			<% } %>
		</div>

		<div class="container mt-5">
			<a href="/" class="btn btn-primary btn-lg"><i class="bi bi-house-door-fill"></i> Home</a>
			<a href="/dashboard" class="btn btn-primary btn-lg"><i class="bi bi-toggles"></i> Dashboard</a>
		</div>

		<script src="/js/message-dismiss.js"></script>
	</body>
</html>