<!DOCTYPE html>

<head>
	<title>[% title %] - Upload Center</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/jquery.fileupload.css" />
	<link rel="stylesheet" type="text/css" href="./css/vendor/fontawesome-all.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/jquery.ui.widget.js" type="text/JAVASCRIPT"></script>
	<script src="./js/vendor/jquery.fileupload.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/upload.js?[% version%]" type="text/JAVASCRIPT"></script>
</head>

<body>

	<div class='ido' style='text-align:center; font-size:8pt'>
		<h1 class='ih' style='text-align:center'>Adding Archives to the Library</h1>

		Add files to your LANraragi instance from your computer, or the Internet directly.<br><br>

		<div style="margin-left:auto; margin-right:auto">

			<div class="left-column">

				Add uploaded files to category:
				<select id="category" class="favtag-btn">
					<option selected value=""> -- No Category -- </option>
					[% FOREACH categories %]
					<option value="[% id %]">[% name %]</option>
					[% END %]
				</select> <br><br>

				<h1 class='ih'>From your computer</h1>

				You can drag and drop files into this window, or click the upload button.
				<br><br>

				<span class='stdbtn fileinput-button' style="height:50px;">
					<i class='fas fa-download fa-2x' style='padding-top:6px; padding-bottom: 5px'></i><br>
					<span>Add from your computer</span>
					<input type='file' name='file' multiple id='fileupload'>
				</span>

				<br><br>
				<h1 class='ih'>From the Internet</h1>

				You can download files from remote URLs directly into LANraragi from here.<br>
				Download jobs will keep going even if you close this window!<br><br>

				Type in your URLs (separated by a newline), and click the download button. <br>
				If a <a href="/config/plugins">Downloader plugin</a> is compatible with the URL, it'll be automatically
				used.<br><br>

				<label for="download_url">URL(s) to download:</label>
				<textarea type="text" name="urls" id="urlForm"
					style="width: 400px; height: 100px; white-space: pre;"></textarea>
				<br><br>


				<span id="download-url" class='stdbtn fileinput-button' style="height:50px;">
					<i class='fas fa-cloud-download-alt fa-2x' style='padding-top:6px; padding-bottom: 5px'></i><br>
					<span>Add from URL(s)</span>
				</span>

			</div>

			<div class="right-column">

				<h2 class="ih" id="progressCount"></h2>
				<h2 class="ih" id="progressTotal"></h2>

				<table style='margin:auto; font-size:9pt; width: 80%; text-align:center;'>
					<tbody id='files'>
						<tr>
							<td colspan=2>
								<div id='progress' style='padding-top:6px; padding-bottom:6px'>
									<div class='bar' style='width: 0%;'></div>
								</div>
							</td>
						</tr>
					</tbody>
				</table>

			</div>
		</div>

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

	[% INCLUDE footer %]
</body>

</html>