{% extends "base.html" %}
{% block title %}Kochmodus: {{ recipe.title }}{% endblock %}
{% block content %}
<div class="cook" data-wakelock>
  <div class="page-head">
    <h1>{{ recipe.title }}</h1>
    <a class="button secondary" href="{% url 'recipes:detail' recipe.pk %}">Fertig</a>
  </div>
  <p class="muted wakelock-status" hidden>Bildschirm bleibt an.</p>

  <section class="card">
    <div class="section-head">
      <h2>Zutaten</h2>
      {% include "recipes/_servings.html" %}
    </div>
    {% for group, items in ingredient_groups %}
      {% if group %}<h3>{{ group }}</h3>{% endif %}
      <ul class="checklist">
        {% for ing in items %}
        <li><label><input type="checkbox"> <span><strong>{{ ing.amount }} {{ ing.unit }}</strong> {{ ing.name }}{% if ing.note %}, {{ ing.note }}{% endif %}</span></label></li>
        {% endfor %}
      </ul>
    {% endfor %}
  </section>

  <section class="card">
    <h2>Zubereitung</h2>
    <ol class="checklist steps-big">
      {% for step in steps %}
      <li><label><input type="checkbox"> <span><span class="step-no">{{ forloop.counter }}.</span> {{ step.text|linebreaksbr }}</span></label></li>
      {% endfor %}
    </ol>
  </section>
</div>
{% endblock %}