{% extends "layout.html" %}

{% block content %}
  <div class="container">
    <h4>{{recipe.name}}</h4>
    <hr>
    <h5>{{recipe.description}}</h5>
    <p>{{recipe.additional_text}}</p>
    {% if recipe.preparation_time != 0 %}
      <i class="material-icons">schedule</i>{{recipe.preparation_time}} Minuten
    {% endif %}
    <hr>
    <h5>Zutaten</h5>
    <ul class="collection blue-grey darken-3">
      {% for ingredient in recipe.ingredients %}
        <li class="collection-item blue-grey darken-3">
          {{ingredient.amount}} {{ingredient.measure}} {{ingredient.ingredient}}
        </li>
      {% endfor %}
    </ul>
    <hr>
    <h5>Zubereitung</h5>
    <ol class="collection blue-grey darken-3">
      {% for preparation_step in recipe.preparation %}
        <li class="collection-item blue-grey darken-3">{{preparation_step}}</li>
      {% endfor %}
    </ol>
    <hr>
    <h5>Bewertung</h5>
    <i class="material-icons">thumb_up</i> {{recipe.upvotes}}<br>
    <i class="material-icons">thumb_down</i> {{recipe.downvotes}}
    <hr>
    <h5>Verbesserungen</h5>
      <ul class="collection blue-grey darken-3">
        {% for enhancement in recipe.enhancements %}
          <li class="collection_item blue-grey darken-3">{{enhancement}}</li>
        {% endfor %}
      </ul>
    <hr>
    <h5>Quelle</h5>
      {{recipe.source}}
  </div>
{% endblock %}