{% extends "_base.html" %}
{% block title %}Recipes · Cauldron{% endblock %}
{% block content %}

<div class="page-head">
  <div class="crumb">// recipes</div>
  <h1>the <span class="accent">grimoire</span></h1>
  <div class="lede">{{ total }} recipes bound to your account. tap any to open.</div>
</div>

{% if not recipes %}
  <section class="panel">
    <p class="muted">no recipes returned. either mealie has none for your account or the request failed quietly.</p>
  </section>
{% else %}

<section class="panel green">
  <div class="panel-head">
    <h2>browse</h2>
    <span class="ctx">page {{ page }} / {{ pages }}</span>
  </div>

  <div class="recipe-grid">
    {% for r in recipes %}
    <a class="recipe-card" href="/recipes/{{ r.slug }}">
      <div class="rname">{{ r.name }}</div>
      <div class="rmeta">
        {% if r.totalTime %}{{ r.totalTime }} · {% endif %}
        {% if r.recipeYield %}{{ r.recipeYield }} · {% endif %}
        {{ r.dateUpdated[:10] if r.dateUpdated else '' }}
      </div>
      {% if r.tags %}
      <div class="rtags">
        {% for t in r.tags[:4] %}<span class="rtag">{{ t.name }}</span>{% endfor %}
      </div>
      {% endif %}
    </a>
    {% endfor %}
  </div>

  <div class="btn-row" style="margin-top: 1.4em;">
    {% if page > 1 %}<a class="btn btn-purple" href="/recipes?page={{ page - 1 }}">← prev</a>{% endif %}
    {% if page < pages %}<a class="btn btn-purple" href="/recipes?page={{ page + 1 }}">next →</a>{% endif %}
  </div>
</section>

{% endif %}

{% endblock %}