<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>${title}</title>
	<link rel="stylesheet" type="text/css" href="/static/bootstrap/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="/static/bootstrap/bootstrap-icons.min.css">
	<link rel="stylesheet" type="text/css" href="./static/css/style.css">
	<link rel="shortcut icon" type="image/png" href="./static/favicon.png">
	<link rel="shortcut icon" sizes="192x192" href="./static/favicon.png">
	<link rel="apple-touch-icon" href="./static/favicon.png">
</head>

<body>
	<div id="wrapper" class="d-flex flex-column vh-100">
	${menu}

		<div class="container-fluid flex-grow-1 min-height-0 z-0">
			<div class="row h-100">
				<div class="col-md-4 col-xl-3 mh-100 overflow-y-auto">
					<div class="bg-body-tertiary p-3 mh-100">
						<div class="row"><div class="col-12"><span class="fs-2 fw-medium">About Reporter</span></div></div>
						<div class="row"><div class="col-6">Version:</div><div class="col-6">${version}</div></div>
						<div class="row"><div class="col-6">Reports available:</div><div class="col-6">${reports}</div></div>
						<div class="row"><div class="col-6">Uptime:</div><div class="col-6">${uptime}</div></div>
						<div class="row"><div class="col-6">Reports ran since startup:</div><div class="col-6">${reports_ran}</div></div>
						<div class="row"><div class="col-12"><span class="fs-2 fw-medium">About You</span></div></div>
						<div class="row"><div class="col-6">Account type:</div><div class="col-6">${usertype}</div></div>
						<div class="row"><div class="col-6"></div><div class="col-6">${role_specific}</div></div>
					</div>
				</div>

				<div class="col-md-8 col-xl-9 mh-100 overflow-y-auto">
					<main class="p-3 mh-100">
						<div class="d-flex justify-content-between align-items-center gap-3 mb-3">
							<span class="fs-1 fw-medium">Demo Database</span>
						</div>
						<div class="row">
							<div class="col-12">
								<div>This demo is populated with the <a href="https://en.wikiversity.org/wiki/Database_Examples/Northwind">Northwind Traders sample data</a> distributed with Microsoft Access. The order dates fall between July 4, 1996 and February 12, 1997.</div>
								<img src="https://upload.wikimedia.org/wikiversity/en/thumb/a/ac/Northwind_E-R_Diagram.png/640px-Northwind_E-R_Diagram.png" class="img-fluid">
								<div>Try running these sample reports:</div>
								<ul class="mb-0">
									<li><a href="/reporter/report/orders_by_employee">Orders by employee</a></li>
									<li><a href="/reporter/report/orders_by_location">Orders by customer location</a></li>
									<li><a href="/reporter/report/orders_by_product">Orders by product</a></li>
									<li><a href="/reporter/report/orders_by_supplier">Orders by supplier</a></li>
									<li><a href="/reporter/report/pivot_table">Pivot table</a></li>
								</ul>
							</div>
						</div>
						<div class="d-flex justify-content-between align-items-center gap-3 mb-3">
							<span class="fs-1 fw-medium">What's new?</span>
						</div>
						<div class="row">
							<div class="col-12"><span class="badge text-bg-primary">February 1, 2025</span> <strong>Reporter v1.3 released.</strong>
								<ul class="mb-0">
									<li>Table library switched from DataTables.net to Tabulator. Columns can now be resized and reordered. Header and footer rows stay on the screen when scrolling. Groups can now be collapsed. Added controls to expand/collapse all groups.</li>
									<li>Excel library switched from SheetJS to ExcelJS. Export files now support striped rows and include totals row. The header row is now frozen by default.</li>
									<li>Columns can now be frozen.</li>
									<li>Layout is more mobile-friendly. Options and Data sections are now independently scrollable. Buttons stay within the Options section when scrolling.</li>
									<li>Added Print button.</li>
								</ul>
							</div>
							<!--div class="col-12"><span class="badge text-bg-primary">July 10, 2024</span> Started publishing this change log.</div-->
						</div>
						<table id="datatable" class="table table-striped"></table>
					</main>
				</div>
			</div>
		</div>
	</div>

	<script src="/static/bootstrap/bootstrap.bundle.min.js"></script>
</body>

</html>