{{ 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 .Params.ingredients }}
				<tr>
					<td>
						<input type="checkbox">
					</td>
					<td>{{ .label }}</td>
					{{- if .unit }}
					<td data-unit="{{ .unit }}" data-amount="{{ .amount }}">{{ .amount }}</td>
					<td data-unit="{{ .unit }}">{{ .unit }}</td>
					{{- else }}
					<td colspan="2">{{ .amount }}</td>
					{{- end }}
				</tr>
			{{- end }}
			</tbody>
		</table>
		<h2>Instructions</h2>
		{{- range .Params.stages }}
			<h3>{{ .label }}</h3>
			<ol>
			{{- range .steps }}
				<li>
					<input type="checkbox"> {{ . | $.Page.RenderString }}
				</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 }}