<style>
	.upload-box {
		border-style: dashed;
	}

	.snippet-edit-root.drop .upload-box {
		border-color: var(--theme-color);
	}
</style>

<template id="snippet-edit">
	<form data-tmpl="root" class="snippet-edit-root timeline-item pa3 mb2 br3" method="POST" action="{{ .SnippetEdit.SubmitUrl }}" enctype="multipart/form-data">
		{{ csrftoken .Session }}
		<input data-tmpl="redirect" type="hidden" name="redirect" />
		<input data-tmpl="snippetId" type="hidden" name="snippet_id" />
		<input data-tmpl="removeAttachment" type="hidden" name="remove_attachment" value="false" />
		<input data-tmpl="file" type="file" name="file" class="dn" />
		<div class="flex items-center">
			<a data-tmpl="avatarLink" class="flex-shrink-0"><img data-tmpl="avatarImg" class="avatar-icon lite mr2" /></a>
			<a data-tmpl="username" class="flex-shrink-0"></a>
			<div class="spacer flex-grow-1"></div>
			<span data-tmpl="date" class="flex-shrink-0">Date</span>
			<a data-tmpl="cancelLink" href="javascript:;" title="Cancel" class="ml2 flex-shrink-0">&#10006;</a>
		</div>
		<textarea data-tmpl="text" placeholder="Description and/or links" class="w-100 h4 mt3" name="text"></textarea>
		<div class="mv3">
			<div data-tmpl="uploadBox">
				<a data-tmpl="uploadLink" class="upload-box flex flex-column items-center pa4 b--dimmest br3 mw6" href="javascript:;">
					Upload image, video, or other file
				</a>
				<div data-tmpl="uploadResetBox" class="mt2 dn">
					<a data-tmpl="uploadResetLink" class="button button-small" href="javascript:;">Restore</a>
				</div>
			</div>
			<div data-tmpl="previewBox" class="preview dn">
				<div data-tmpl="previewContent">
				</div>
				<div class="actions mt2">
					<a data-tmpl="removeLink" class="button button-small" href="javascript:;">Remove</a>
					<a data-tmpl="resetLink" class="button button-small" href="javascript:;">Restore</a>
					<a data-tmpl="replaceLink" class="button button-small" href="javascript:;">Replace</a>
				</div>
				<div data-tmpl="errors" class="mt2 hide-if-empty"></div>
			</div>
		</div>
		<div class="flex">
			<div data-tmpl="projectList" class="flex-grow-1 flex flex-wrap g2"></div>
			<div class="flex-shrink-0 flex">
				<input data-tmpl="deleteButton" class="flex-grow-0 flex-shrink-0 mr2" type="submit" name="action" value="Delete" />
				<input data-tmpl="saveButton" class="flex-grow-0 flex-shrink-0" type="submit" name="action" value="Save" />
			</div>
		</div>
	</form>
</template>
<template id="snippet-edit-project">
	<div data-tmpl="root" class="flex flex-row items-center bg-theme-dimmer ph2 pv1 br2">
		<input data-tmpl="projectId" type="hidden" name="project_id" />
		<img data-tmpl="projectLogo" class="db mr1 br1 h1-5"/>
		<div data-tmpl="projectName"></div>
		<a data-tmpl="removeButton" class="ml2 mr1" href="javascript:;">&#10006;</a>
	</div>
</template>
<script>
	const maxFilesize = {{ .SnippetEdit.AssetMaxSize }};
	const availableProjects = JSON.parse("{{ .SnippetEdit.AvailableProjectsJSON }}");
</script>
<script src="{{ static "js/snippetedit.js" }}"></script>

