{% extends "kitchen/base.html" %}
{% block title %}Recipes{% endblock %}
{% block content %}
<div class="head"><h1>Recipe library <small>{{ recipes|length }} recipe{{ recipes|length|pluralize }}</small></h1>
<a class="btn" href="{% url 'import_recipe' %}">Import recipe</a></div>
<form class="filters card" method="get">
  <input type="search" name="q" value="{{ q }}" placeholder="Search title, tag or ingredient">
  <select name="meal"><option value="">Any meal</option>
    <option value="breakfast" {% if f.meal == "breakfast" %}selected{% endif %}>Breakfast</option>
    <option value="lunch" {% if f.meal == "lunch" %}selected{% endif %}>Lunch</option>
    <option value="dinner" {% if f.meal == "dinner" %}selected{% endif %}>Dinner</option></select>
  <select name="tag"><option value="">Any tag</option>{% for t in all_tags %}<option {% if f.tag == t %}selected{% endif %}>{{ t }}</option>{% endfor %}</select>
  <select name="diet"><option value="">Any diet</option>{% for d in diets %}<option {% if f.diet == d %}selected{% endif %}>{{ d }}</option>{% endfor %}</select>
  <input type="number" name="max_kcal" value="{{ f.max_kcal }}" placeholder="Max kcal" min="0">
  <input type="number" name="min_protein" value="{{ f.min_protein }}" placeholder="Min protein g" min="0">
  <input type="number" name="max_minutes" value="{{ f.max_minutes }}" placeholder="Max minutes" min="0">
  <select name="sort">
    <option value="title" {% if f.sort == "title" %}selected{% endif %}>Sort: name</option>
    <option value="calories" {% if f.sort == "calories" %}selected{% endif %}>Sort: calories</option>
    <option value="protein" {% if f.sort == "protein" %}selected{% endif %}>Sort: protein</option>
    <option value="time" {% if f.sort == "time" %}selected{% endif %}>Sort: time</option>
    <option value="cost" {% if f.sort == "cost" %}selected{% endif %}>Sort: cost</option>
  </select>
  <button class="btn">Filter</button>
</form>
<div class="grid">
{% for r in recipes %}
  <a class="card recipe" href="{{ r.get_absolute_url }}">
    <h3>{{ r.title }}</h3>
    <p class="meta">{{ r.meal_list|join:", " }} · {{ r.total_minutes }} min · serves {{ r.servings }}</p>
    <p class="macros"><b>{{ r.nutrition.kcal|floatformat:0 }}</b> kcal <span>{{ r.nutrition.protein|floatformat:0 }}g protein</span> <span>{{ currency }}{{ r.cost_per_serving|floatformat:2 }}/serving</span></p>
    <p>{% for t in r.tag_list|slice:":4" %}<span class="tag">{{ t }}</span>{% endfor %}</p>
  </a>
{% empty %}<p class="muted">No recipes match those filters.</p>{% endfor %}
</div>
{% endblock %}