{% import "macros/list.html" as list %}

{% extends "blocks/base.html" %}

{% block variables -%}
  {% set base_url = ".." %}
{%- endblock variables %}

{% block title %}{{ recipe.title }}{% endblock title %}

{% block main -%}
  {%- set lang = lang.recipe -%}
  <article class="recipe">{{ lf -}}
    <header>{{ lf -}}
      <h1>{{ recipe.title }}</h1>{{ lf -}}
    </header>{{ lf }}
    {%- if image_path is string -%}
      <section class="image">{{ lf -}}
        <img alt="{{ recipe.title }}" src="../{{ image_path | escape_xml | safe }}">{{ lf -}}
      </section>{{ lf }}
    {%- endif -%}
    <section class="metadata">{{ lf -}}
      <p class="entry yield">{{ lf -}}
        <span class="icon">{{ lf }}
          {%- include "includes/person.html" -%}
        </span>{{ lf -}}
        <span class="content">{{ lf }}
          {%- set yield = recipe.metadata.yield -%}
          <span class="value">{{ lf -}}
            <a class="decrease change">−</a>{{ lf -}}
            <a class="digits default">{{ yield.value }}</a>{{ lf -}}
            <a class="increase change">+</a>{{ lf -}}
          </span>{{ lf -}}
          <span class="unit">
            {%- if yield.unit is string -%}
              {{ yield.unit }}
            {%- else -%}
              {{ lang.metadata_servings }}
            {%- endif -%}
          </span>{{ lf -}}
        </span>{{ lf -}}
      </p>{{ lf }}
      {%- set duration = recipe.metadata.duration %}
      {%- if duration is object -%}
        <p class="entry">{{ lf -}}
          <span class="icon">{{ lf }}
            {%- include "includes/clock.html" -%}
          </span>{{ lf -}}
          <span class="content">{{ lf }}
            {%- set minutes = duration.hours * 60 + duration.minutes %}
            {%- if minutes < 120 -%}
              <span class="value">{{ minutes }}</span>{{ lf -}}
              <span class="unit">
                {{-
                  minutes | pluralize(
                    singular = lang.metadata_minute,
                    plural = lang.metadata_minutes
                  )
                -}}
              </span>{{ lf }}
            {%- else %}
              {%- set hours = minutes / 60 -%}
              <span class="value">{{ hours | round }}</span>{{ lf -}}
              <span class="unit">
                {{- hours | pluralize(
                    singular = lang.metadata_hour,
                    plural = lang.metadata_hours
                  )
                -}}
              </span>{{ lf }}
            {%- endif -%}
          </span>{{ lf -}}
        </p>{{ lf }}
      {%- endif -%}
      <p class="entry">{{ lf -}}
        <span class="icon">{{ lf }}
          {%- include "includes/salt.html" -%}
        </span>{{ lf -}}
        <span class="content">{{ lf }}
          <span class="value">{{ recipe.ingredients.count }}</span>{{ lf -}}
          <span class="unit">{{ lang.metadata_ingredients }}</span>{{ lf -}}
        </span>{{ lf -}}
      </p>{{ lf -}}
    </section>{{ lf -}}
    <section class="ingredients">{{ lf -}}
      <h2>{{ lf -}}
        {{ lang.heading_ingredients }}{{ lf -}}
        <a class="collapse-trigger" data-collapse-selector=".recipe > .ingredients > .collapsible">−</a>{{ lf -}}
      </h2>{{ lf -}}
      <div class="collapsible">{{ lf -}}
        {{- list::list(tag = "ul", list = recipe.ingredients) -}}
      </div>{{ lf -}}
    </section>{{ lf }}
    {%- if recipe.notes | length > 0 -%}
      <section class="notes">{{ lf -}}
        <h2>{{ lf -}}
          {{ lang.heading_notes }}{{ lf -}}
          <a class="collapse-trigger" data-collapse-selector=".recipe > .notes > .collapsible">−</a>{{ lf -}}
        </h2>{{ lf -}}
        <ul class="dash-list collapsible">{{ lf }}
          {%- for note in recipe.notes -%}
            <li class="item">{{ note }}</li>{{ lf }}
          {%- endfor -%}
        </ul>{{ lf -}}
      </section>{{ lf }}
    {%- endif -%}
    <section class="instructions">{{ lf -}}
      <h2>{{ lf -}}
        {{ lang.heading_instructions }}{{ lf -}}
        <a class="collapse-trigger" data-collapse-selector=".recipe > .instructions > .collapsible">−</a>{{ lf -}}
      </h2>{{ lf -}}
      <div class="collapsible">{{ lf -}}
        {{ list::list(tag = "ol", list = recipe.instructions) -}}
      </div>{{ lf -}}
    </section>{{ lf }}
    {%- set source = recipe.metadata.source %}
    {%- if source is object -%}
      <section class="source">{{ lf -}}
        <p>
          {%- if source.author is defined -%}
            {{ lang.metadata_author }}: <span class="author">{{ source.author }}</span>
          {%- elif source.book is defined -%}
          {{ lang.metadata_source }}: <span class="book">{{ source.book }}</span>
          {%- else -%}
          {{ lang.metadata_source }}: <a href="{{ source.link.url | escape_xml | safe }}">{{ source.link.name }}</a>
          {%- endif -%}
        </p>{{ lf -}}
      </section>{{ lf }}
    {%- endif -%}
  </article>
{% endblock main %}