<!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/style.css" type="text/css">
</head>
<body>
<header>{{if ne .UpstreamUrl ""}}
<nav>
<a href="{{.UpstreamUrl}}">Link to recipe</a>
</nav>
{{end}}
<h1>{{.Title}}</h1>
</header>
<main>
<img src="./recipe/image?id={{.Id}}" alt="Recipe image">
<h2>Recipe description</h2>
<button id="editbtn" style="display:block" onclick=startEditMode()>edit</button>
<button id="cancelbtn" style="display:none" onclick=cancelEditMode()>abort</button>
<button id="savebtn" style="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>
<footer>
<hr>
<p>The <a href="https://xengineering.eu/git/ceres">Ceres</a> recipe server is licensed under <a href="https://www.gnu.org/licenses/agpl-3.0.en.html">AGPL v3</a> and developed with <a href="https://simplecss.org/">simple.css</a>.</p>
</footer>
</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>