{{template "head.tmpl" "Your dropboxes"}}
<form class="create space-y-12 px-6 my-12" method="POST">

	<section class="space-y-4">
		<h1 class="text-4xl font-bold text-center">Your dropboxes</h1>

		<div class="flex items-center">
			<h4 class="my-2 flex-1 text-xl font-bold">Previously created</h4>
			<span>
				<button
					type="button"
					class="log-clear px-6 py-2 rounded-md bg-yellow-600 text-white hover:bg-yellow-700 focus:ring-2 focus:ring-offset-2 focus:ring-yellow-600">
					Clear
				</button>
			</span>
		</div>
		<div class="log-area"></div>
	</section>

	<section class="space-y-4">
		<h1 class="text-4xl font-bold text-center">Create a dropbox</h1>

		<div class="notice-area hidden p-4 bg-red-100 text-red-700"></div>

		<div class="flex items-center">
			<h4 class="my-2 flex-1 text-xl font-bold">Bucket options</h4>
			<span>
				<input
					class="rounded"
					type="checkbox"
					id="options-save-bucket"
					data-save="Endpoint,Region,AccessKey,SecretKey">
				<label for="options-save-bucket">Remember</label>
			</span>
		</div>
		<div>
			<p class="mt-1 text-gray-500">
				Consider setting up a <a class="text-blue-600 hover:text-blue-800" target="_blank" href="https://docs.aws.amazon.com/AmazonS3/latest/userguide/mpu-abort-incomplete-mpu-lifecycle-config.html">lifecycle policy</a> to abort incomplete multipart uploads.
			</p>
		</div>
		<div>
			<label for="options-endpoint">Endpoint</label>
			<div class="mt-1">
				<input
					class="w-full rounded-md border-gray-400"
					type="url"
					id="options-endpoint"
					name="Endpoint"
					required
					placeholder="https://bucketname.s3.us-west-2.amazonaws.com">
			</div>
		</div>
		<div>
			<label for="options-region">Region</label>
			<div class="mt-1">
				<input
					class="w-full rounded-md border-gray-400"
					type="text"
					id="options-region"
					name="Region"
					required
					placeholder="us-east-1">
			</div>
		</div>
		<div>
			<label for="options-accesskey">Access key</label>
			<div class="mt-1">
				<input
					class="w-full rounded-md border-gray-400"
					type="text"
					id="options-accesskey"
					name="AccessKey"
					autocomplete="off"
					placeholder="">
			</div>
		</div>
		<div>
			<label for="options-secretkey">Secret key</label>
			<div class="mt-1">
				<input
					class="w-full rounded-md border-gray-400"
					type="text"
					id="options-secretkey"
					name="SecretKey"
					autocomplete="off"
					placeholder="">
			</div>
			<p class="mt-1 text-sm text-gray-500">
				Your keys will be stored in the database until the dropbox link expires. See <a class="text-blue-600 hover:text-blue-800" href="help#credentials">creating credentials</a> for more information.
			</p>
		</div>

		<div class="flex items-center">
			<h4 class="my-2 flex-1 text-xl font-bold">Upload options</h4>
			<span>
				<input
					class="rounded"
					type="checkbox"
					id="options-save-upload"
					data-save="ACL,Prefix,ExpiresNumber,ExpiresUnits">
				<label for="options-save-upload">Remember</label>
			</span>
		</div>
		<div>
			<label for="options-acl">Canned ACL <span class="text-sm text-gray-500">Optional</span></label>
			<div class="mt-1">
				<input
					class="w-full rounded-md border-gray-400"
					type="text"
					id="options-acl"
					name="ACL"
					placeholder=""
					value="">
			</div>
			<p class="mt-1 text-sm text-gray-500">
				Specify a <a class="text-blue-600 hover:text-blue-800" target="_blank" href="https://docs.aws.amazon.com/AmazonS3/latest/userguide/acl-overview.html#canned-acl">canned ACL</a>. Otherwise, object access permissions will follow bucket defaults, usually private unless <a class="text-blue-600 hover:text-blue-800" href="help#public-access">public access</a> is configured.
			</p>
		</div>
		<div>
			<label for="options-prefix">Prefix</label>
			<div class="mt-1">
				<input
					class="w-full rounded-md border-gray-400"
					type="text"
					id="options-prefix"
					name="Prefix"
					placeholder="uploads/"
					value="{random}/">
			</div>
			<p class="mt-1 text-sm text-gray-500">
				Files will be uploaded with this prefix. For a random <code>[a-z0-9]{16}</code> prefix , use <code>{random}</code>.
			</p>
		</div>
		<div>
			<label for="options-expiry-number">Expires</label>
			<div class="mt-1 flex">
				<input
					class="w-full rounded-l-md border-gray-400"
					type="number"
					id="options-expiry-number"
					name="ExpiresNumber"
					required
					value="7"
					min="0"
					max="1000">
				<select
					class="rounded-r-md border-gray-400 border-l-0"
					id="options-expiry-unit"
					name="ExpiresUnits"
					required>
					<option value="m">minutes</option>
					<option value="h">hours</option>
					<option value="d" selected>days</option>
				</select>
			</div>
			<p class="mt-1 text-sm text-gray-500">
				Time until the dropbox link expires, and credentials purged from the server.
				<span class="text-red-700" id="expiry-notice"></span>
			</p>
			<input
				type="hidden"
				name="Expires"
				data-derive="duration,ExpiresNumber,ExpiresUnits"
				data-derive-notice="#expiry-notice">
		</div>
		<div class="flex justify-end">
			<a
				class="px-6 py-2 rounded-md text-blue-600 hover:text-blue-800 focus:ring-2 focus:ring-offset-2 focus:ring-blue-600"
				href="help#create">
				Help
			</a>
			<input
				class="px-6 py-2 rounded-md bg-green-600 text-white hover:bg-green-700 focus:ring-2 focus:ring-offset-2 focus:ring-green-600"
				type="submit"
				value="Create">
		</div>
	</section>

</form>
{{template "foot.tmpl"}}