<!DOCTYPE html>
<html>
<head>
<title>Recipes</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../../../static/libweb.css" type="text/css">
</head>
<body>
<main>
<h1>{{.Title}}</h1>
<img src="./recipe/image?id={{.Id}}" alt="Recipe image">{{if ne .UpstreamUrl ""}}
<p><a href="{{.UpstreamUrl}}">Link to recipe</a></p>{{end}}
<h2>Recipe description</h2>
<button id="editbtn" style="margin-top:20px;margin-bottom:20px;display:block" onclick=startEditMode()>edit</button>
<button id="cancelbtn" style="margin-top:20px;margin-bottom:20px;display:none" onclick=cancelEditMode()>abort</button>
<button id="savebtn" style="margin-top:20px;margin-bottom:20px;display:none" onclick=saveDescriptionMarkdown()>save</button>
<pre id="description_md" style="display:none;" contenteditable="true">{{.DescriptionMarkdown}}</pre>
<div id="rendered_description_md" style="display:block;">
{{.RenderedDescriptionMarkdown}}
</div>
</main>
<script>
var editbtn = document.getElementById("editbtn");
var cancelbtn = document.getElementById("cancelbtn");
var savebtn = document.getElementById("savebtn");
var description_md = document.getElementById("description_md");
var rendered_description_md = document.getElementById("rendered_description_md");
function startEditMode() {
editbtn.style.display = "none";
rendered_description_md.style.display = "none";
cancelbtn.style.display = "block";
savebtn.style.display = "block";
description_md.style.display = "block";
}
function cancelEditMode() {
window.location.reload(true);
}
function saveDescriptionMarkdown() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
window.location.reload(true);
}
}
xhttp.open("POST", window.location.href, true);
xhttp.send(description_md.innerHTML.replaceAll("<br>", "\n"));
}
</script>
</body>
</html>