<!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="/reporter/static/css/style.css">
	<link rel="stylesheet" type="text/css" href="/reporter/static/css/tabulator_bootstrap5.min.css">
	<link rel="stylesheet" type="text/css" href="/reporter/static/css/autocomplete.min.css">
	<link rel="shortcut icon" type="image/png" href="/reporter/static/favicon.png">
	<link rel="shortcut icon" sizes="192x192" href="/reporter/static/favicon.png">
	<link rel="apple-touch-icon" href="/reporter/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">
					<div class="bg-body-tertiary mh-100 overflow-y-auto">
						<form method="post" id="report_options">
							<div class="sticky-top px-3 pt-3 bg-body-tertiary">
								<div class="d-flex justify-content-between align-items-center gap-3 mb-2">
									<span class="fs-2 fw-medium">Options</span>
									<button type="submit" class="btn btn-primary fs-4 text-nowrap"><i class="bi bi-play"></i> Run</button>
									<input type="hidden" id="autorun" value="${autorun}">
								</div>
								<div class="progress bg-dark d-flex mb-2 position-relative" role="progressbar" aria-label="Report progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
									<div id="report_status" class="position-absolute w-100 text-center align-self-center text-light">Ready</div>
									<div id="report_progress" class="progress-bar" style="width: 0%"></div>
								</div>
								<div>
									<p class="mb-0">${report_description}</p>
								</div>
								<hr>
							</div>
							${options}
							<!--
							<div class="mb-3">
								<label for="slider" class="form-label">Range Slider</label>
								<input type="range" class="form-range" id="slider">
							</div>
							<div class="mb-3">
								<label for="dropdown" class="form-label">Dropdown Selector</label>
								<select class="form-select" id="dropdown">
									<option selected>Select an option</option>
									<option value="option1">Option 1</option>
									<option value="option2">Option 2</option>
									<option value="option3">Option 3</option>
								</select>
							</div>
							-->
							<div class="sticky-bottom px-3 pb-3 bg-body-tertiary">
								<hr>
								<button type="button" id="create_link" class="btn btn-dark w-100"><i class="bi bi-star-fill"></i> Direct link to report with these options</button>
							</div>
						</form>
					</div>
				</div>

				<div class="col-md-8 col-xl-9 h-100 d-flex flex-column">
					<div class="p-3" id="title_container">
						<span class="fs-1 fw-medium" id="report_title">${report_title}</span>
					</div>
					<div id="table-controls" class="btn-toolbar justify-content-between invisible">
						<div class="input-group mb-3">
							<span class="input-group-text"><i class="bi bi-search"></i></span>
							<input type="text" class="form-control" id="filter" placeholder="Search...">
						</div>
						<div class="d-none mb-3" id="group-controls">
							<button type="button" class="btn btn-secondary" id="btn_expand"><i class="bi bi-arrows-expand"></i> Expand all</button>
							<button type="button" class="btn btn-secondary" id="btn_collapse"><i class="bi bi-arrows-collapse"></i> Collapse all</button>
						</div>
						<div class="btn-group mb-3">
							<!--button type="button" class="btn btn-secondary" id="tool_select">Mouse: Drag</button-->
							<button type="button" class="btn btn-secondary" id="btn_print"><i class="bi bi-printer"></i> Print</button>
							<button type="button" class="btn btn-excel" id="export_excel"><i class="bi bi-file-earmark-spreadsheet"></i> To Excel</button>
						</div>
					</div>
					<div id="datatable" class="flex-grow-1"></div>
				</div>
			</div>
		</div>
	</div>
	<script src="/static/bootstrap/bootstrap.bundle.min.js"></script>
	<script src="/reporter/static/js/luxon.min.js"></script>
	<script src="/reporter/static/js/exceljs.bare.min.js"></script>
	<script src="/reporter/static/js/tabulator.min.js"></script>
	<script src="/reporter/static/js/autocomplete.min.js"></script>
	<script src="/reporter/static/js/script_reports.js"></script>
</body>

</html>