<!DOCTYPE html>

<head>
	<title>[% title %] - Database Backup/Restore</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/jquery.fileupload.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/jquery.ui.widget.js" type="text/JAVASCRIPT"></script>
	<script src="/js/vendor/jquery.fileupload.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/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/backup.js?[% version%]" type="text/JAVASCRIPT"></script>

</head>

<body>

	<div class='ido' style='text-align:center'>
		<h2 class='ih' style='text-align:center'>Database Backup/Restore</h2>

		<br>
		You can backup your existing database here, or restore an existing backup.<br><br>
		Backuping allows you to download a JSON file containing all your categories and archive IDs, and their matching
		metadata.<br>
		Restoring from a backup will restore this metadata, <b>for IDs which already exist in your database.</b><br>
		(Categories will always be restored)</br>

		<table style='margin:auto; font-size:9pt; margin-top:25px; text-align:center;'>
			<tbody id='files'>
				<tr>
					<td>
						<span id='do-backup' class="stdbtn" style="height:50px; display:inline-block">
							<i style="padding-top:6px; padding-bottom: 5px" class="fa fa-download fa-2x"></i><br>
							<span>Backup Database</span>
						</span>
					</td>
					<td>
						<span class="stdbtn fileinput-button" style="height:50px; display:inline-block;">
							<i style="padding-top:6px; padding-bottom: 5px" class="fa fa-upload fa-2x"></i><br>
							<span>Restore Backup</span>
							<input type="file" id="fileupload" multiple="" name="file">
						</span>
					</td>
				</tr>
		</table>
		<br /><br />

		<span style='margin:auto; font-size:9pt; width: 80%; text-align:center;'>

			<div id='processing' style='display:none'>
				<i class='fa fa-3x fa-compact-disc fa-spin' style='margin-top:20px' id='tag-spinner'></i>
				<h3>Restoring your backup ... </h3>
			</div>

			<h3 id='result'></h3>

		</span>


		<br><br><br>
		<input id='return' class='stdbtn' type='button' value='Return to Library' />


		<br><br>

	</div>

	[% INCLUDE footer %]
</body>

</html>