{% extends "kitchen/base.html" %}
{% block title %}{{ recipe.title }}{% endblock %}
{% block content %}
<div class="head">
  <div><a class="back" href="{% url 'recipe_list' %}">&larr; All recipes</a><h1>{{ recipe.title }}</h1>
  <p class="meta">Prep {{ recipe.prep_minutes }} min · cook {{ recipe.cook_minutes }} min · {{ recipe.meal_list|join:", " }}
    {% if recipe.leftover_friendly %}· good for leftovers{% endif %}
    {% if recipe.source_url %}· <a href="{{ recipe.source_url }}" rel="noopener">source</a>{% endif %}</p>
  <p>{% for t in recipe.tag_list %}<span class="tag">{{ t }}</span>{% endfor %}{% for d in recipe.diet_list %}{% if d not in recipe.tag_list %}<span class="tag diet">{{ d }}</span>{% endif %}{% endfor %}</p></div>
</div>
{% if recipe.description %}<p class="lede">{{ recipe.description }}</p>{% endif %}
<div class="cols">
  <section class="card" id="scaler" data-url="{% url 'api_scale' recipe.pk %}" data-base="{{ recipe.servings }}" data-system="{{ system }}">
    <h2>Ingredients</h2>
    <div class="scale-controls">
      <label>Servings <input type="number" id="servings" min="1" max="200" step="1" value="{{ recipe.servings }}"></label>
      <button type="button" class="btn small ghost" id="reset">Reset</button>
      <details><summary>Scale to what I have</summary>
        <div class="by-ing"><input id="by-name" placeholder="ingredient, e.g. chicken"><input id="by-amount" placeholder="amount, e.g. 300g"><button type="button" class="btn small" id="by-go">Scale</button></div>
      </details>
    </div>
    <p class="muted" id="scale-info"></p>
    <ul class="ingredients" id="ingredient-list">
      {% for l in scaled.lines %}<li>{{ l.text }}</li>{% endfor %}
    </ul>
    <ul class="warnings" id="warnings"></ul>
    {% if unmatched %}<p class="muted small">Not in the ingredient database (excluded from nutrition): {{ unmatched|join:", " }}</p>{% endif %}
  </section>
  <aside class="card nutrition">
    <h2>Nutrition Facts</h2>
    <p class="small">Per serving (recipe makes {{ recipe.servings }})</p>
    <div class="cal"><span>Calories</span><b>{{ kcal }}</b></div>
    <table>
      <tr class="dvh"><td></td><td>% Daily Value*</td></tr>
      {% for r in label %}<tr class="{% if r.bold %}bold{% endif %} i{{ r.indent }}"><td>{{ r.label }} {{ r.value }}{{ r.unit }}</td><td>{% if r.dv is not None %}{{ r.dv }}%{% endif %}</td></tr>{% endfor %}
    </table>
    <p class="small">* Percent Daily Values are based on a 2,000 calorie diet. Estimate from USDA reference values.</p>
    <p class="small">Estimated cost: {{ currency }}{{ recipe.cost_per_serving|floatformat:2 }} per serving</p>
  </aside>
</div>
<section class="card"><h2>Method</h2><ol class="steps">{% for s in recipe.step_list %}<li>{{ s }}</li>{% endfor %}</ol></section>
{% endblock %}
{% block scripts %}{% load static %}<script type="module" src="{% static 'kitchen/scaler.js' %}"></script>{% endblock %}