<!DOCTYPE html>

<html>

<head>
	<title>[% title %] - Batch Operations</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/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/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/batch.js?[% version%]" type="text/JAVASCRIPT"></script>

</head>

<body>

	<div class='ido' style='text-align:center'>
		<h2 class='ih' style='text-align:center'>Batch Operations</h2>

		You can apply modifications to multiple archives in one go here.<br><br>
		Select what you'd like to do, check archives you want to use it on, and get rolling! <br>
		Archives with no tags have been pre-checked.<br><br>

		<div style='margin-left:auto; margin-right:auto;'>
			<div style='text-align:left; width:400px !important' class='left-column'>

				<!-- Task Selector -->
				<table class="tag-options" style="margin-left: auto;margin-right: auto;">
					<tbody>
						<tr>
							<td>
								<h2>Task :</h2>
							</td>
							<td>
								<select id="batch-operation" class="favtag-btn" style="font-size:20px; height:30px">
									<option value="plugin">🧩 Use Plugin</option>
									<option value="clearnew">🆕 Remove New Flag</option>
									<option value="tagrules">📏 Apply Tag Rules</option>
									<option value="addcat">📚 Add To Category</option>
									<option value="delete">🗑️ Delete Archive</option>
								</select>
							</td>
						</tr>
					</tbody>
				</table>

				<!-- Task Options -->
				<div class="id1 tag-options" style="padding:4px; height:unset; width:97%;">
					<table>
						<tbody>
							<tr class="operation plugin-operation">
								<td>Use plugin :</td>
								<td>
									<select id="plugin" class="favtag-btn">
										[% FOREACH plugins %]
										<option value="[% namespace %]">[% name %]</option>
										[% END %]
									</select>
								</td>
							</tr>
							<tr class="operation plugin-operation">
								<td>Timeout (max 20s):</td>
								<td>
									<input type="number" id="timeout" min="0" max="20" value="0"> seconds
								</td>
							</tr>
							<tr class="operation plugin-operation">
								<td colspan="2">
									<h3>This plugin recommends a cooldown of <span id="cooldown">-1</span> seconds.
									</h3>
									<i class="fas fa-exclamation-triangle"></i> Some external services may temporarily
									ban
									your machine for excessive loads if you call a plugin too many times! <br>
									Make sure to set a suitable <b>timeout</b> between archives using this picker if
									the plugin you want to use is concerned. <br><br>

								</td>
							</tr>

							<tr class="operation plugin-operation">
								<td colspan="2">
									<input type="checkbox" id="override">
									<label for="override">Override Plugin Global Arguments</label>
								</td>
							</tr>

							<tr class="operation tagrules-operation">
								<td style="vertical-align: top;">This will apply the following Tag Rules to the selected
									Archives.<br><br>
									You can edit your Tag Rules in Server Configuration.<br><br>

									<input id='server-config' class='stdbtn' type='button'
										value='Server Configuration' />
								</td>
								<td>
									<textarea class="stdinput" size="20" style='height:196px'
										disabled>[% tagrules %]</textarea>
								</td>
							</tr>

							<tr class="operation clearnew-operation">
								<td colspan="2" style="text-align: center;">

									This removes the "new" flag from the selected archives.
									<br>
								</td>
							</tr>

							<tr class="operation addcat-operation">
								<td>Add to Category :</td>
								<td>
									<select id="category" class="favtag-btn">
										[% FOREACH categories %]
										<option value="[% id %]">[% name %]</option>
										[% END %]
									</select>
								</td>
							</tr>

							<tr class="operation delete-operation">
								<td></td>
								<td style="font-size:36px; text-align: center;">
									💣👀💦💦
								</td>
							</tr>
							<tr class="operation delete-operation">
								<td colspan="2" style="text-align: center;">

									<h3>This will delete both metadata and matching files from your system!
										Please use with caution.
									</h3>
									<br>
								</td>
							</tr>
						</tbody>
					</table>

					<table class="operation plugin-operation">
						<tbody>
							[% FOREACH plugin IN plugins %][% IF plugin.parameters && plugin.parameters.size %]

							<span id="[% plugin.namespace %]-timeout" style="display:none">[% IF plugin.cooldown %][%
								plugin.cooldown %][% ELSE %]0[% END %]</span>

							[% FOREACH arg IN plugin.parameters %]
							<tr class="arg-override [% plugin.namespace %]-arg" style="display:none">
								<td style="max-width:250px">[% arg.desc %] :</td>
								<td>
									<input class="stdinput [% plugin.namespace %]-argvalue" type=[% SWITCH arg.type %]
										[% CASE 'string' %] "text" [% CASE 'bool' %] "checkbox" value="1" [% CASE 'int'
										%] "number" [% CASE %] "color" [% END %]>
								</td>
							</tr>
							[% END %][% END %][% END %]

						</tbody>
					</table>
				</div>

				<div class="tag-options" style="text-align:center">
					<br /><br />
					<input type='button' id="check-uncheck" value='Check/Uncheck all' class='stdbtn' checked='false'>
					<input type='button' id="start-batch" value='Start Task' class='stdbtn'>

				</div>

				<div class="job-status" style="display:none; text-align:center">

					<input id="cancel-job" type='button' value='Cancel' class='stdbtn'>
					<input id="restart-job" type='button' value='Start another job' class='stdbtn'>

					<div id="progress" style="padding-top:6px; padding-bottom:6px">
						<div class="bar"></div>
						Processed <span id="arcs"></span> out of <span id="totalarcs"></span>
					</div>
					<div class="id1" style="padding:4px; height:auto; width:97%;">
						<pre id="log-container" class="log-panel" />
					</div>
				</div>

			</div>

			<div class="id1 right-column"
				style='text-align:center; min-width:400px; width: 60% !important; height:500px;'>
				<ul class='checklist' id="arclist">
				</ul>

				<div id="loading-placeholder"
					style="align-content: center;top: 150px; position: relative; margin-left: auto; margin-right: auto; width: 90%;">
					<i class="fas fa-8x fa-spin fa-compact-disc"></i><br><br>
					<h2>Preparing your data.</h2>
				</div>
			</div>
			<br><br>
		</div>

		<input id='plugin-config' class='stdbtn' type='button' value='Plugin Configuration' />
		<input id='return' class='stdbtn' type='button' value='Return to Library' />

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

</html>