{{define "recipe"}}
<!DOCTYPE html>
<html>
{{ template "head" }}
<body>
<header>
{{ template "nav" }}
<h1>{{.Recipe.Title}}</h1>
</header>
<main>
<p>
<button onclick="window.location.href='/recipe/{{.Recipe.Id}}?view=recipe-edit';">edit</button>
<button onclick="window.location.href='/recipe/{{.Recipe.Id}}?view=recipe-confirm-deletion';">delete</button>
</p>{{ if ne .Recipe.Notes "" }}
<p class="notice" style="white-space: pre-line;">{{.Recipe.Notes}}</p>{{end}}{{ if ne .Recipe.Portions "" }}
<p><i>Portions:</i> {{.Recipe.Portions}}</p>{{end}}{{ if ne .Recipe.Url "" }}
<p><i>Original recipe:</i> <a href="{{.Recipe.Url}}">{{.Recipe.Url}}</a></p>{{end}}{{if .HasIngredients}}
<p><i>Ingredient summary:</i></p>
<ul>{{range .Summary}}
<li>{{.}}</li>{{end}}
</ul>{{end}}{{range .Recipe.Steps}}
<section>
<p>{{.Text}}</p>
<p><i>{{range $i, $el := .Ingredients}}{{if $i}}, {{end}}{{if ne $el.Amount ""}}{{$el.Amount}} {{end}}{{if ne $el.Unit ""}}{{$el.Unit}} {{end}}{{$el.Type}}{{end}}</i></p>
</section>{{end}}
</main>
{{ template "footer" }}
<script src="/static/view/static/ceres.js"></script>
</body>
</html>
{{end}}