{% extends "base.html" %}
{% block title %}{{ recipe.title }}{% endblock %}
{% block content %}
<article class="recipe">
  {% if images %}
  <div class="gallery">
    {% for img in images %}
    <a href="{% url 'recipes:photo' img.uuid 'gross' %}"><img src="{% url 'recipes:photo' img.uuid 'gross' %}" alt="Foto {{ forloop.counter }}" width="{{ img.width }}" height="{{ img.height }}"{% if not forloop.first %} loading="lazy"{% endif %}></a>
    {% endfor %}
  </div>
  {% endif %}

  <h1>{{ recipe.title }}</h1>
  <p class="muted">
    von {{ recipe.owner.display_name }} · {% if recipe.is_public %}öffentlich{% else %}🔒 privat{% endif %}
    · geändert {{ recipe.updated_at|date:"d.m.Y" }}
  </p>

  <div class="recipe-actions">
    <form method="post" action="{% url 'recipes:favorite' recipe.pk %}">
      {% csrf_token %}
      <input type="hidden" name="next" value="{{ request.get_full_path }}">
      <button type="submit" class="button secondary">{% if is_favorite %}★ Favorit{% else %}☆ Merken{% endif %}</button>
    </form>
    {% block extra_actions %}{% endblock %}
    {% if is_owner %}<a class="button secondary" href="{% url 'recipes:edit' recipe.pk %}">Bearbeiten</a>{% endif %}
    {% if can_delete %}<a class="button danger" href="{% url 'recipes:delete' recipe.pk %}">Löschen</a>{% endif %}
  </div>

  {% if recipe.description %}<p class="lead">{{ recipe.description|linebreaksbr }}</p>{% endif %}

  {% if recipe.prep_minutes or recipe.cook_minutes %}
  <ul class="facts">
    {% if recipe.prep_minutes %}<li><span class="muted">Zubereitung</span> {{ recipe.prep_minutes }} Min.</li>{% endif %}
    {% if recipe.cook_minutes %}<li><span class="muted">Koch-/Backzeit</span> {{ recipe.cook_minutes }} Min.</li>{% endif %}
    {% if recipe.prep_minutes and recipe.cook_minutes %}<li><span class="muted">Gesamt</span> {{ recipe.total_minutes }} Min.</li>{% endif %}
  </ul>
  {% endif %}

  {% if tags %}
  <p class="chips">{% for tag in tags %}<a class="chip" href="{% url 'recipes:list' %}?tag={{ tag.name|urlencode }}">#{{ tag.name }}</a>{% endfor %}</p>
  {% endif %}

  <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="ingredients">
        {% for ing in items %}
        <li><span class="amount">{{ ing.amount }} {{ ing.unit }}</span> <span>{{ ing.name }}{% if ing.note %}<span class="muted">, {{ ing.note }}</span>{% endif %}</span></li>
        {% endfor %}
      </ul>
    {% empty %}
      <p class="muted">Keine Zutaten angegeben.</p>
    {% endfor %}
  </section>

  <section class="card">
    <h2>Zubereitung</h2>
    {% if steps %}
    <ol class="steps">
      {% for step in steps %}<li>{{ step.text|linebreaksbr }}</li>{% endfor %}
    </ol>
    {% else %}
    <p class="muted">Keine Schritte angegeben.</p>
    {% endif %}
  </section>

  {% if recipe.author_notes %}
  <section class="card notes">
    <h2>Notizen von {{ recipe.owner.display_name }}</h2>
    <p>{{ recipe.author_notes|linebreaksbr }}</p>
  </section>
  {% endif %}

  {% if recipe.source_url %}
  <p class="muted">Quelle: <a href="{{ recipe.source_url }}" rel="noopener noreferrer nofollow" target="_blank">{{ recipe.source_url|truncatechars:60 }}</a></p>
  {% endif %}

  {% block after_recipe %}{% endblock %}
</article>
{% endblock %}