{% extends "layout.html" %}
{% block title %}{{ this.name }}{% endblock %}
{% block body %}
<article class="recipe">
  <!-- date added: {{ this.date }} -->
  <section id="img-carousel" class="v-scroll center">
    {%- for img in this.attachments.images | sort(attribute='_id')
      if img._id.rsplit('.')[0] != 'cov' %}
    <img class="lozad" data-src="{{ img|url }}" height="400">
    {%- endfor -%}
  </section>

  {% if this.source -%}
  <div id="source" class="small center">
    {%- if this.source.host -%}
      <a href="{{ this.source }}">⤳ {{ this.source.host }}</a>
    {%- else -%}
      ⤳ {{ this.source }}
    {%- endif -%}
  </div>
  {% endif %}
  <h1>{{ this.name }}</h1>

  <section id="metrics" class="small">
    <div id="rating" class="xlarge">{{ this.rating | asRating }}</div>
    <div class="difficulty {{this.difficulty}}">
      <div></div><div></div><div></div>
      <span {% if not this.difficulty %}class="small"{%- endif %}>{{ 
        bag('i18n+' + this.alt, 'difficulty', this.difficulty or '_unset') }}</span>
    </div>
    <div>{{ bag('i18n+' + this.alt, 'duration.label') }}: {{ this.time | asDuration(this.alt) or '—' }}</div>
    <div>{{ bag('i18n+' + this.alt, 'yield.label') }}: {{ this.yield or '—' }}</div>
  </section>

  <section id="ingredients">
    <h2>{{ bag('i18n+' + this.alt, 'title.ingredients') }}:</h2>
    <ul class="no-bullets li-lg-space">
    {%- for ing in this.ingredients %}
      {%- if ing.isGroup %}
      <li class="dark-red bold mrgTopMd">{{ ing.name }}:</li>
      {%- else %}
      <li>
        {%- if ing.quantity %}{{ ing.quantity }} {% endif -%}
        {%- if ing.unit %}{{ ing.unit }} {% endif -%}
        <span class="light-red">{{ ing.name }}</span>
        {%- if ing.note -%}
        <span class="small italic">{{ ', ' ~ ing.note | replaceAtRefURLs(label=bag('i18n+' + this.alt, 'ingredients.recipeLink')) }}</span>
        {%- endif -%}
      </li>
      {%- endif %}
    {%- endfor %}
    </ul>
  </section>

  <section id="directions">
    <h2>{{ bag('i18n+' + this.alt, 'title.directions') }}:</h2>
    {% if site.get('/settings', alt=this.alt)['replace_temp'] -%}
      {{ this.directions.html|replace('°C', '℃')|replace('°F', '℉') }}
    {% else -%}
      {{ this.directions }}
    {% endif -%}
  </section>

  <div style="clear: both;"></div>
</article>
{% endblock %}
