{% for recipe in recipes %}
<div class="card">
  <div class="card-header">
    <span class="card-title">
      {% if recipe.status == 'ready' %}
        <span class="badge badge-ready">✅ Ready</span>
      {% elif recipe.status == 'partial' %}
        <span class="badge badge-partial">⚠️ Partial</span>
      {% else %}
        <span class="badge badge-missing">❌ Missing</span>
      {% endif %}
      {{ recipe.name }}
    </span>
    {% if recipe.type == 'meta_recipe' %}
    <span style="color: var(--sage); font-size: 0.8rem;">{{ recipe.gear }}</span>
    {% endif %}
  </div>

  {% if recipe.type == 'meta_recipe' %}
  {% for slot in recipe.slots %}
  <div class="slot">
    <div class="slot-name">
      {{ slot.name }}
      {% if not slot.required %}<span style="color: var(--sage); font-size: 0.7rem;">(optional)</span>{% endif %}
    </div>
    <div class="slot-options">
      {% for opt in slot.available_options %}
      <span class="slot-option" title="Have: {{ opt.have }}{% if opt.notes %} — {{ opt.notes }}{% endif %}">
        {{ opt.ingredient }}
      </span>
      {% endfor %}
      {% for opt in slot.missing_options %}
      <span class="slot-option unavailable" title="Need: {{ opt.needed }}{% if opt.notes %} — {{ opt.notes }}{% endif %}">
        {{ opt.ingredient }}
      </span>
      {% endfor %}
    </div>
  </div>
  {% endfor %}

  {% if recipe.base_missing %}
  <div style="margin-top: 0.5rem;">
    <span style="color: var(--red-bright); font-size: 0.8rem;">
      Missing base: {% for b in recipe.base_missing %}{{ b.ingredient }} ({{ b.needed }}){% if not forloop.last %}, {% endif %}{% endfor %}
    </span>
  </div>
  {% endif %}
  {% endif %}

  {% if recipe.warnings %}
  <div style="margin-top: 0.5rem;">
    {% for w in recipe.warnings %}
    <span style="color: var(--orange-warm); font-size: 0.8rem;">⚠ {{ w }}</span><br>
    {% endfor %}
  </div>
  {% endif %}
</div>
{% empty %}
<div class="empty">
  <div class="empty-icon">📖</div>
  <p>No recipes yet.</p>
</div>
{% endfor %}