{% extends "base.html" %}

{% block content %}
	{% include "markdown-parser.html" %}
	<link rel="stylesheet" href="/static/editor.css">
	<script async src="/static/editor.js"></script>
	<h2>{{ dataobj['title'] }}</h2>
    {{ ", ".join(dataobj['tags']) }}
	<br>
	{{ dataobj["desc"] }}
    <br>
	
    {{ dataobj['date'] }}
	{% if dataobj['type'] == 'bookmark' or dataobj['type'] == 'pocket_bookmark' %}
		<a href="{{ dataobj['url'] }}" rel="noopener">
			Link
		</a>
	{% endif %}
	<br>
	<div id="content-cont">
		<div id="content">
		</div>
		<textarea>
		</textarea>
	</div>
	<form action="/dataobj/delete/{{ dataobj['id'] }}" method="delete" novalidate>
		<input type="button" value="Toggle Web Editor" onclick="toggleEditor(this)">
		<input type="button" value="Edit locally" onclick="openData({{ dataobj['id'] }}, this)">
        {{ form.hidden_tag() }}
        <p>{{ form.submit() }}</p>
    </form>
	<script>
		{% set content = dataobj["content"]
				    		| replace("\\", "\\\\")
							| replace("`", "\\`")
							| replace("${", "\\${")
							| safe
		%}
		document.getElementById("content").innerHTML = window.parser.render(`\${toc}\n{{ content }}`)
		async function openData(id, btn)
		{
		  let res = await fetch(`${SCRIPT_ROOT}/dataobj/local_edit/${id}`, {
				method: "GET"
			  });
		  if (res.ok)
		  {
			btn.value = "Loading editor...";
			// impossible to know load time of editor, but hide the button after some time
			setTimeout(function() {
			  btn.style.display = "none";
			}, 2000);

		  }
		}

		let editorDiv, oldContent;
		window.addEventListener("load", function() {
		  let editor = new EasyMDE({
			autofocus: true,
			previewRender: function(content) {
			  return window.parser.render("${toc}\n\n" + content);  
			},
			toolbar: [
			  "bold", 
			  "italic", 
			  "strikethrough",
			  "heading",
			  "code",
			  "quote",
			  "link",
			  "image",
			  "table",
			  {
			    name: "LaTeX",
				className: "fa fa-math",
				action: (editor) => {
				  editor.codemirror.replaceSelection("$$\n$$")
				}
			  },
			  "side-by-side",
			  "fullscreen",
			  {
				name: "save",
				action: (editor) => {
				  fetch(`${SCRIPT_ROOT}/dataobjs/{{dataobj['id']}}`, {
					method: "PUT",
					body: JSON.stringify({
					  "content": editor.value()
					}),
					headers: {
					  "content-type": "application/json"
					}
				  })
				  statusBtn.classList.add("fa-check-circle");
				  statusBtn.classList.remove("fa-times");
				},
				className: "fa fa-save"
			  },
			  {
				name: "status",
				className: "fa fa-check-circle status"
			  },
			],
			shortcuts: {
			  "save": "Ctrl-S"
			}
		  });
		  // escape text for template literal - double slashes for python rendering and js rendering
		  editor.value(`{{ content }}`)
		  // document.querySelector(".side-by-side").click();

		  let statusBtn = document.querySelector(".status .fa");
		  editor.codemirror.on("change", function() {
			statusBtn.classList.remove("fa-check-circle");
			statusBtn.classList.add("fa-times")
		  })
		  oldContent = document.getElementById("content"), editorDiv = document.querySelector(".EasyMDEContainer");
		  editorDiv.classList.add("hidden");
		})


		function toggleEditor(btn)
		{
		  oldContent.classList.toggle("hidden"), editorDiv.classList.toggle("hidden");
		}
	</script>
{% endblock %}
