{{ define "head" }}
<link rel="stylesheet" href='{{ "css/single.css" | absURL }}'>
<script type="application/ld+json">
  {{ .RawContent }}
</script>
{{ end }}

{{ define "main" }}
{{- $data := transform.Unmarshal .RawContent -}}
<main id="main" class="post">
  <a href="{{- $data.url -}}">
    <h1 class="title">{{ .Title }}</h1>
  </a>
  <article class="content recipe">
    <div><i>{{ .PublishDate.Format "January 2, 2006"}}</i></div>
    <p>{{- $data.description -}}</p>
    
    <div class="body">
      <div class="ingredients">
        <h2>Ingredients</h2>
        <ul>
        {{- range $data.recipeIngredient -}}
          <li>
            <input type="checkbox" id="{{ . }}">
            <label for="{{ . }}">{{ . }}</label>
          </li>
        {{ end }}
      </ul>
    </div>

      <div class="instructions">
        <h2>Instructions</h2>
        <ol>
        {{- range $data.recipeInstructions -}}
        <li>
          <input type="checkbox" id="{{ . }}">
          <label for="{{ . }}">{{ . }}</label>
        </li>
        {{ end }}
        </ol>
      </div>
    </div>

  </article>
</main>
{{ end }}