{{ 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 }}
	</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></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 }}