<!DOCTYPE html>

<head>
	<title>[% title %] - Edit Mode</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/config.css" />

	<link rel="stylesheet" type="text/css" href="/css/vendor/fontawesome-all.min.css" />
	<link rel="stylesheet" type="text/css" href="/css/vendor/tagger.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/tagger.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/edit.js?[% version%]" type="text/JAVASCRIPT"></script>

</head>

<body>

	<div class='ido' style='text-align:center'>

		[% IF artist %]
		<h2 class='ih' style='text-align:center'>Editing [% arctitle %] by [% artist %] </h2>
		[% ELSE %]
		<h2 class='ih' style='text-align:center'>Editing [% arctitle %]</h2>
		[% END %]

		<form name='editArchiveForm' id='editArchiveForm' enctype='multipart/form-data' method='post' autocomplete="off"
			style="width:98%;">
			<table style='margin:auto; font-size:8pt;'>
				<tbody>
					<tr>
						<td style='text-align:left; width:100px'>Current File Name:</td>
						<td>
							<input class='stdinput edit-mode-stdinput' type='text' readonly='' size='20'
								value="[% file %]" name='filename'>
						</td>
					</tr>

					<tr>
						<td style='text-align:left; width:100px'>ID:</td>
						<td>
							<input id='archiveID' class='stdinput edit-mode-stdinput' type='text' readonly=''
								maxlength='255' size='20' value="[% id %]" name='id'>
						</td>
					</tr>

					<tr>
						<td style='text-align:left; width:100px'>Title:</td>
						<td>
							<input id='title' class='stdinput edit-mode-stdinput' type='text' maxlength='255' size='20'
								value="[% arctitle %]" name='title'>
						</td>
					</tr>

					<tr>
						<td style='text-align:left; width:100px; vertical-align:top'>Tags <span
								style="font-size:6pt">(separated by
								hyphens, i.e : tag1, tag2)</span> :
						</td>
						<td>
							<textarea id='tagText' class='stdinput' name='tags' autocomplete="off"
								style="min-height:125px; width:96%">[% tags %]</textarea>
							<i class='fa fa-5x fa-compact-disc fa-spin'
								style=' color:black; position:absolute; top:45%; left:52%; display:none'
								id='tag-spinner'></i>
						</td>
					</tr>

					<tr>
						<td colspan='2' style='text-align:center'> <br />
							<input class='stdbtn' type='button' id="save-metadata" value='Save Metadata' />
							<input class='stdbtn' type='button' id="delete-archive" value='Delete Archive' />
							<input id='goback' class='stdbtn' type='button' value='Return to Library' />
							<br />
						</td>
					</tr>
				</tbody>
			</table>
		</form>

	</div>

	[% INCLUDE footer %]
</body>

</html>