<!DOCTYPE html>
<html>
{{ template "head.html" }}
<body>
<header>
<nav>
<a href="/index.html">HOME</a>
<a href="/add_recipes">add recipe</a>
</nav>
<h1>Edit a recipe</h1>
</header>
<main>
<p>Recipe ID: {{.Id}}</p>
<pre contenteditable="true" id="editor"><code>{{.Text}}</code></pre>
<button onclick="save()">save</button>
<a href="/recipe?id={{.Id}}"><button>back</button></a>
<a href="/recipe/confirm-deletion?id={{.Id}}"><button style="background-color:red">delete</button></a>
{{ template "footer.html" }}
</main>
<script>
function save() {
const xhttp = new XMLHttpRequest();
xhttp.open("POST", "/recipe/edit?id={{.Id}}", true);
xhttp.send(document.getElementById('editor').innerText);
}
</script>
</body>
</html>