{% 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>
    <a class="button secondary" href="{% url 'recipes:cook' recipe.pk %}{% if servings != recipe.servings %}?portionen={{ servings }}{% endif %}">Kochmodus</a>
    {% 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 %}

  <section class="card" id="kommentare">
    <h2>Kommentare{% if comments %} ({{ comments|length }}){% endif %}</h2>
    {% for comment in comments %}
    <div class="comment" id="kommentar-{{ comment.pk }}">
      <div class="comment-head">
        <strong>{{ comment.author.display_name }}</strong>
        <span class="muted">{{ comment.created_at|date:"d.m.Y H:i" }}</span>
      </div>
      <p>{{ comment.text|linebreaksbr }}</p>
      {% if comment.pk in deletable_comments %}
      <form method="post" action="{% url 'recipes:comment_delete' recipe.pk comment.pk %}">
        {% csrf_token %}<button type="submit" class="linklike small-link">Löschen</button>
      </form>
      {% endif %}
    </div>
    {% empty %}
    <p class="muted">Noch keine Kommentare.</p>
    {% endfor %}
    <form method="post" action="{% url 'recipes:comment_create' recipe.pk %}" class="comment-form" novalidate>
      {% csrf_token %}
      {% with form=comment_form %}{% include "form_fields.html" %}{% endwith %}
      <button type="submit" class="button">Kommentieren</button>
    </form>
  </section>
</article>
{% endblock %}