{{define "recipe-edit"}}
<!DOCTYPE html>
<html>
{{ template "head" }}
<body>
<header>
{{ template "nav" }}
<h1>Recipe editor</h1>
</header>
<main>
<form action="/recipe{{if ne .Id ""}}/{{.Id}}{{end}}" onsubmit="updateRecipe(event)">
<input type="hidden" name="id" value="{{.Id}}">
<p><input type="text" name="title" value="{{.Title}}" placeholder="Title" required></p>
<p><input type="number" name="portions" value="{{.Portions}}" placeholder="Portions"></p>
<p><input type="text" name="url" value="{{.Url}}" placeholder="URL"></p>
<p><textarea name="notes" rows="4" cols="50" placeholder="Notes">{{.Notes}}</textarea></p>
<div id="steps">{{range .Steps}}{{template "recipe-step" .}}{{end}}
</div>
<button type="button" onclick="addNewStep();">add step</button>
<button type="submit">save</button>{{if eq .Id ""}}
<button onclick="window.location.href='/recipes';">cancel</button>{{else}}
<button onclick="window.location.href='/recipe/{{.Id}}';">cancel</button>{{end}}
</form>
</main>
{{ template "footer" }}
<script src="/static/view/static/ceres.js"></script>
</body>
</html>
{{end}}