{{ define "_editor" }}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
<style>
	#titlepath, #title {
		font-size: 2rem;
		font-weight: 600;
	}
	.EasyMDEContainer button {
		color: black;
	}
	img {
		max-width: 100%;
		max-height: 100%;
	}
	.monospace {
		font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
	}
	.lil_btn {
		width: initial;
		display: inline-block;
	}
	input, label, textarea {
		margin: initial;
	}
	.editor-toolbar > button.preview {
		color: #08c;
	}
</style>
<script>
	var saveFeedbackInterval = null
	function pushFile() {
		const title = document.getElementById("title").innerHTML ? document.getElementById("title").innerHTML : ""
		const body = easyMDE.value() ? easyMDE.value() : ""
		const id = easyMDE.meta.id ? easyMDE.meta.id : ""
		headers = {}
		if (title)
			headers["Title"] = title
		http("PUT", "/api/v0/files/" + id, (body, status) => {
			if (status != 200) {
				alert(`failed to push file ${id}: ${status}: ${body}`)
				throw `failed to push file ${id}: ${status}: ${body}`
			}
			drawTree()
			//drawFile(id)
			document.getElementById("saveFeedback").innerHTML = "success!"
			if (saveFeedbackInterval) {
				clearTimeout(saveFeedbackInterval)
			}
			saveFeedbackInterval = setTimeout(() => {document.getElementById("saveFeedback").innerHTML = ""}, 5000)
		}, body, headers)
	}
</script>
<article id="article">
	<div class="columns">
		<span class="r_buffer">
         <form action="#" onsubmit="pushFile(); return false;"> <!-- TODO -->
			   <input class="button-info lil_btn" type="submit" value="SAVE"/>
         </form>
		</span>
		<span id="titlePath">
			/
         {{ if ne .This.PID "" }}
            <a href="/ui/files/{{ .This.PID }}">{{ .This.PTitle }}</a> /
         {{ end }}
      </span>
		<span id="title" class="thic_flex" contenteditable>{{ .This.Title }}</span>
		<span class="l_buffer">
         <form action="" method="delete" onsubmit="return confirm('are you sure?');"> <!-- TODO -->
			   <input class="button-error lil_btn" type="submit" value="DELETE"/>
         </form>
		</span>
	</div>
	<!-- todo: each line no is an anchor -->
	<div class="monospace">
		<textarea id="my-text-area"></textarea>
	</div>
	<div id="saveFeedback" style="min-height: 1.2em; text-align: right;">
	</div>
</article>
<script>
	const easyMDE = new EasyMDE({
		autoDownloadFontAwesome: true,
		autofocus: true,
		autosave: {
			enabled: false,
		},
		element: document.getElementById('my-text-area'),
		forceSync: true,
		indentWithTabs: false,
		initialValue: "# initial\nvalue",
		showIcons: ["code", "table"],
		spellChecker: false,
		sideBySideFullscreen: false,
		tabSize: 3,
		previewImagesInEditor: true,
		insertTexts: {
			image: ["![](", ")"],
			link: ["[](", ")"],
		},
		lineNumbers: true,
		lineWrapping: false,
		uploadImage: true,
		imageUploadEndpoint: "/api/v0/media", // POST wants {data: {filePath: "/..."}}
		imagePathAbsolute: false,
		renderingConfig: {
			codeSyntaxHighlighting: true,
		},
		status: ["lines", "words", "cursor"],
	})
	easyMDE.value({{ .This.Content }})
</script>
{{ end }}