<!DOCTYPE html>

<head>
	<title>[% title %] - Library Statistics</title>

	<meta name="viewport" content="width=device-width" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📚</text></svg>">
	<link rel="stylesheet" type="text/css" href="/css/lrr.css?[% version%]" />

	<link rel="stylesheet" type="text/css" href="./css/vendor/fontawesome-all.min.css" />
	<link rel="stylesheet" type="text/css" href="./css/vendor/jqcloud.min.css">
	<link rel="stylesheet" type="text/css" href="/css/vendor/allcollapsible.min.css" />
	<link rel="stylesheet" type="text/css" href="/css/vendor/ReactToastify.min.css" />
	<link rel="stylesheet" type="text/css" href="/css/vendor/sweetalert2.min.css" />
	[% csshead %]

	<script src="./js/vendor/jquery.min.js" type="text/JAVASCRIPT"></script>
	<script src="/js/vendor/preact.umd.js" type="text/JAVASCRIPT"></script>
	<script src="/js/vendor/hooks.umd.js" type="text/JAVASCRIPT"></script>
	<script src="/js/vendor/compat.umd.js" type="text/JAVASCRIPT"></script>
	<script>window.React=window.preactCompat;window.react=window.preactCompat;</script>
	<script src="/js/vendor/clsx.min.js" type="text/JAVASCRIPT"></script>
	<script src="/js/vendor/react-toastify.umd.js" type="text/JAVASCRIPT"></script>
	<script src="./js/vendor/jqcloud.min.js"></script>
	<script src="/js/vendor/allcollapsible.min.js" type="text/JAVASCRIPT"></script>
	<script src="/js/vendor/sweetalert2.min.js" type="text/JAVASCRIPT"></script>

	<script src="./js/common.js?[% version%]" type="text/JAVASCRIPT"></script>
	<script src="./js/server.js?[% version%]" type="text/JAVASCRIPT"></script>
	<script src="./js/stats.js?[% version%]" type="text/JAVASCRIPT"></script>
</head>

<body>

	<div class='ido' style='text-align:center'>
		<h2 class="ih" style="text-align:center">Library Statistics</h2>
		<br>
		<br>

		<div id="stats">

			<h1 class="ih">
				<i class="fa fa-book fa-2x" aria-hidden="true"></i> <span style="font-size: 20px"> [% archivecount %]
				</span>
				Archives on record
				<br><br>
				<i class="fa fa-tags fa-2x" aria-hidden="true"></i> <span style="font-size: 20px" id="tagcount">
					<i id="spinner" class="fa fa-virus fa-spin"></i> </span>
				Different
				tags existing
				<br><br>
				<i class="fa fa-folder-open fa-2x" aria-hidden="true"></i> <span style="font-size: 20px"> [% arcsize %]
					GB </span>
				in content folder
				<br><br>
				<i class="fa fa-book-reader fa-2x" aria-hidden="true"></i> <span style="font-size: 20px"> [% pagestat %]
				</span>
				pages read
				<br><br><br>

				Tag Cloud <br>
			</h1>

		</div>

		<br>

		<div id="statsLoading" style="width: 80%; margin-left: auto; margin-right: auto">
			<p class="loading-spinner">
				<i id="spinner" class="fa fa-dharmachakra fa-4x fa-spin"></i>
			</p>
			Asking the great powers that be for your tag statistics...
		</div>

		<div id="tagCloud" style="width: 80%; height: 500px; margin-left: auto; margin-right: auto">
		</div>

		<ul class="collapsible extensible with-right-caret" id="detailedStats"
			style="display: none; width:80%; margin-left: auto; margin-right: auto">
			<li class="option-flyout">
				<div class="collapsible-title caret-right">
					<i class="fa fa-chart-bar" aria-hidden="true"></i> Detailed Stats
				</div>
				<div class="collapsible-body">
					<div id="tagList"
						style="max-width: 80vw; display: flex; height:calc(2048px - 25vw); flex-direction: column; flex-wrap:wrap; align-items:flex-start; overflow:auto">
					</div><br>
					(These statistics only show tags that appear at least twice in your database.)
				</div>
			</li>
		</ul>

		<br>
		<input id="goback" type="button" value="Return to Library" class="stdbtn">

	</div>
	[% INCLUDE footer %]
</body>


</html>