{{ define "head" }}
		<script type="text/javascript" src="/js/cookbook.js"></script>
{{- end }}

{{ define "main" }}
<article>
	<header>
		<h1>{{ .Title }}</h1>
		{{- range .Params.tags }}
		<a href="/tags/{{ . | lower }}">#{{ . }}</a>
		{{- end }}
		{{- if .Draft }}
		<section class="admonition">
			<div class="admonition-title">
				draft
			</div>
			<div class="admonition-content">
				This recipe is still a <strong>draft</strong>.
				It has most likely been shared with you for
				reviewing purposes, but neither the
				instructions nor the ingredients have been
				properly checked yet. Do not make this recipe
				unless you are an experienced cook, and please
				do not yet share it with other people.
			</div>
		</section>
		{{- end }}
	</header>
	<main>
		{{ .Content }}
		<table>
			<tbody>
				<tr>
					<td>Preparation time</td>
					<td>{{ .Params.preptime }} minutes</td>
				</tr>
				<tr>
					<td>Cooking time</td>
					<td>{{ .Params.cooktime }} minutes</td>
				</tr>
				<tr>
					<td>Serves</td>
					<td data-serves="{{ .Params.serves }}">{{ .Params.serves }}</td>
				</tr>
			</tbody>
		</table>
		<h2>Ingredients</h2>
		<table>
			<thead>
				<tr>
					<th>&nbsp;</th>
					<th>Ingredient</th>
					<th>Amount</th>
					<th>Unit</th>
				</tr>
			</thead>
			<tbody>
			{{- range $i, $ingredient := .Params.ingredients }}
				<tr>
					<td>
						<input id="ingredient{{ $i }}" type="checkbox">
					</td>
					<td>
						<label for="ingredient{{ $i }}">{{ .label }}</label>
						{{- if .links }}
						{{- range .links }}
						<a class="external-link-icon" href="{{ . }}">↗</span></a>
						{{- end }}
						{{- end }}
					</td>
					{{- if .unit }}
					<td data-unit="{{ $ingredient.unit }}" data-amount="{{ $ingredient.amount }}">{{ .amount }}</td>
					<td data-unit="{{ $ingredient.unit }}">{{ $ingredient.unit }}</td>
					{{- else }}
					<td colspan="2">{{ $ingredient.amount }}</td>
					{{- end }}
				</tr>
			{{- end }}
			</tbody>
		</table>
		<h2>Instructions</h2>
		{{- range $i, $stage := .Params.stages }}
			<h3>{{ $stage.label }}</h3>
			<ol>
			{{- range $j, $step := $stage.steps }}
				<li>
					<input id="stage{{ $i }}-step{{ $j }}" type="checkbox">
					<label for="stage{{ $i }}-step{{ $j }}">{{ $step | $.Page.RenderString }}</label>
				</li>
			{{- end }}
			</ol>
		{{- end }}
	</main>
	<footer>
		<p class="text-center">
			<a class="image-link" rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">
				<img alt="Creative Commons License" src="/img/cc-by-sa.png">
			</a>
		</p>
	</footer>
</article>
{{ end }}