{% extends "kitchen/base.html" %}
{% block title %}Pantry{% endblock %}
{% block content %}
<div class="head"><h1>Pantry</h1></div>
<div class="cols">
<section class="card"><h2>In stock</h2>
  <form method="post" action="{% url 'pantry_add' %}" class="inline-form">{% csrf_token %}
    <input name="name" placeholder="Item, e.g. spinach" required>
    <input name="quantity" type="number" step="any" min="0" placeholder="Qty" required style="width:5.5rem">
    <select name="unit">{% for u in units %}<option {% if u == 'g' %}selected{% endif %}>{{ u }}</option>{% endfor %}</select>
    <input name="expires" type="date" title="Expiry date">
    <button class="btn small">Add</button>
  </form>
  <table class="shop">
    {% for i in items %}
    <tr class="{% if i.left is not None and i.left < 0 %}expired{% elif i.left is not None and i.left <= 5 %}soon{% endif %}">
      <td><b>{{ i.name }}</b></td><td>{{ i.quantity|floatformat:'-2' }} {{ i.unit }}</td>
      <td>{% if i.expires %}{% if i.left < 0 %}<span class="pill bad">expired {{ i.expires|date:"M j" }}</span>{% elif i.left <= 5 %}<span class="pill warn">use soon: {{ i.left }}d</span>{% else %}<span class="muted">{{ i.expires|date:"M j" }}</span>{% endif %}{% endif %}</td>
      <td class="price"><form method="post" action="{% url 'pantry_delete' i.pk %}">{% csrf_token %}<button class="linkbtn" aria-label="Remove {{ i.name }}">remove</button></form></td>
    </tr>
    {% empty %}<tr><td class="muted">Nothing in the pantry yet.</td></tr>{% endfor %}
  </table>
</section>
<section class="card"><h2>Cook from pantry</h2>
  <p class="muted small">Recipes ranked by how much of their ingredients you already have. Expired items do not count.</p>
  <ol class="rank">
    {% for r in ranked %}
    <li><div class="bar"><span style="width: {{ r.pct }}%"></span></div>
      <a href="{{ r.recipe.get_absolute_url }}">{{ r.recipe.title }}</a> <b>{{ r.pct }}%</b>
      {% if r.uses_soon %}<span class="pill warn">uses {{ r.uses_soon|join:", " }}</span>{% endif %}
      {% if r.missing %}<div class="small muted">Missing: {{ r.missing|slice:":6"|join:", " }}{% if r.missing|length > 6 %}…{% endif %}</div>{% endif %}</li>
    {% endfor %}
  </ol>
</section>
</div>
{% endblock %}