{{define "recipe"}}
{{- $hasIngredients := false -}}
{{- range .Steps -}}
{{- if gt (len .Ingredients) 0 -}}
{{- $hasIngredients = true -}}
{{- end -}}
{{- end -}}
<!DOCTYPE html>
<html>
{{ template "head" }}
<body>
<header>
{{ template "nav" }}
<h1>{{.Title}}</h1>
</header>
<main>
<p>
<button onclick="window.location.href='/recipe/{{.Id}}?view=recipe-edit';">edit</button>
<button onclick="window.location.href='/recipe/{{.Id}}?view=recipe-confirm-deletion';">delete</button>
</p>{{ if ne .Notes "" }}
<p class="notice" style="white-space: pre-line;">{{.Notes}}</p>{{end}}{{ if ne .Portions "" }}
<p><i>Portions:</i> {{.Portions}}</p>{{end}}{{ if ne .Url "" }}
<p><i>Original recipe:</i> <a href="{{.Url}}">link</a></p>{{end}}
{{if $hasIngredients}}<p><i>Ingredient summary:</i></p>
<ul>{{range .Steps}}{{range $i, $el := .Ingredients}}
<li>{{if ne $el.Amount ""}}{{$el.Amount}} {{end}}{{if ne $el.Unit ""}}{{$el.Unit}} {{end}}{{$el.Type}}</li>{{end}}{{end}}
</ul>{{end}}{{range .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}}