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

		<% 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">
			<h1 class="text-center"><i class="bi bi-toggles"></i> Admin Dashboard</h1>
		</div>

		<div class="container mt-5">
			<h2 class="text-center"><i class="bi bi-basket"></i> User Checked Out Books</h2>

			<div class="table-responsive">
				<table class="table table-bordered text-center">
					<thead>
						<tr>
							<th>ID</th>
							<th>Username</th>
							<th>Name</th>
							<th>Role</th>
							<th>Checked Out Books</th>
							<th>Actions</th>
						</tr>
					</thead>
					<tbody>
						<% users.forEach((user, index) => { %>
							<tr>
								<td><%= index + 1 %></td>
								<td><%= user.data.username %></td>
								<td><%= user.data.name %></td>
								<td><%= user.data.role %></td>
								<td><%= user.data.checkout.length %></td>
								<td>
									<a href="/edit-users?username=<%= user.data.username %>&name=<%= user.data.name %>&role=<%= user.data.role %>" class="btn btn-info btn-lg"><i class="bi bi-pencil-fill"></i> Edit</a>

									<% if (user.data.checkout.length === 0) { %>
										<a class="btn btn-secondary disabled" aria-disabled="true"><i class="bi bi-book-fill"></i> View <%= user.data.checkout.length %> Books</a>
									<% } else { %>
										<a href="/user-books?username=<%= user.data.username %>&name=<%= user.data.name %>" class="btn btn-primary btn-lg"><i class="bi bi-book-fill"></i> View <%= user.data.checkout.length %> Books</a>
									<% } %>
								</td>
							</tr>
						<% }); %>
					</tbody>
				</table>
			</div>
			<hr>
		</div>

		<div class="container mt-5">
			<h2 class="text-center"><i class="bi bi-cart-check"></i> Checkout Limit</h2>
			<div class="alert alert-warning" role="alert">
				Hint: -1 for no limit
			</div>
			
			<form action="/dashboard" method="post" id="checkoutLimitForm">
				<div class="row">
					<div class="col">
						<input id="newCheckoutLimit" name="newCheckoutLimit" class="form-control form-control-lg" value="<%= checkoutLimit %>" autocomplete="newCheckoutLimit">
					</div>
					<div class="col-auto">
						<button type="submit" class="btn btn-primary btn-lg"><i class="bi bi-floppy2-fill"></i> Save</button>
					</div>
				</div>
			</form>
		</div>

		<div class="container mt-5">
			<hr>
			<h2 class="text-center"><i class="bi bi-cloud-download"></i> Download Library</h2>
			<a href="/download-excel" class="btn btn-outline-secondary btn-lg"><i class="bi bi-cloud-download"></i> Download Library (xlsx)</a>
			<a href="/download-csv/books" class="btn btn-outline-secondary btn-lg"><i class="bi bi-cloud-download"></i> Download Books (csv)</a>
			<a href="/download-csv/users" class="btn btn-outline-secondary btn-lg"><i class="bi bi-cloud-download"></i> Download Users (csv)</a>	
		</div>

		<div class="container mt-5">
			<hr>
			<h2 class="text-center"><i class="bi bi-cloud-upload"></i> Upload Library (Experimental)</h2>
			<a href="/upload-excel" class="btn btn-outline-secondary btn-lg"><i class="bi bi-cloud-upload"></i> Upload Library (xlsx)</a>
			<a href="/upload-csv" class="btn btn-outline-secondary btn-lg"><i class="bi bi-cloud-upload"></i> Upload Library (csv)</a>
		</div>

		<div class="container mt-5" style="margin-bottom: 0;">
			<hr>
			<h2 class="text-center"><i class="bi bi-hdd-stack"></i> Server Information</h2>
			<p style="margin-bottom: 0;">IP Address: <%= server.ip %></p>
			<p style="margin-bottom: 0;">Port Number: <%= server.port %></p>
			<p style="margin-bottom: 0;">Platform: <%= server.platform %></p>
			<p style="margin-bottom: 0;">Version: <%= server.version %></p>

			<% if (server.electron) { %>
				<p style="margin-bottom: 0;">Electron Version: <%= server.electron %></p>
			<% } %>

			<p style="margin-bottom: 0;">CPUs: <%= server.cpu %></p>
			<p style="margin-bottom: 0;">Uptime: <%= server.uptime %> Seconds</p>
			<p style="margin-bottom: 0;">Memory: <%= server.memory.heapUsed/1000000 %> / <%= server.memory.heapTotal/1000000 %> MB</p>

		</div>

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

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