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

<div class="page-head">
  <div class="crumb">// recipes / {{ recipe.slug }}</div>
  <h1>{{ recipe.name }}</h1>
  {% if recipe.description %}<div class="lede">{{ recipe.description }}</div>{% endif %}
</div>

<section class="panel">
  <div class="panel-head">
    <h2>meta</h2>
  </div>
  <dl class="kv">
    {% if recipe.totalTime %}<dt>total</dt><dd>{{ recipe.totalTime }}</dd>{% endif %}
    {% if recipe.prepTime %}<dt>prep</dt><dd>{{ recipe.prepTime }}</dd>{% endif %}
    {% if recipe.cookTime %}<dt>cook</dt><dd>{{ recipe.cookTime }}</dd>{% endif %}
    {% if recipe.recipeYield %}<dt>yield</dt><dd>{{ recipe.recipeYield }}</dd>{% endif %}
    {% if recipe.recipeServings %}<dt>servings</dt><dd>{{ recipe.recipeServings }}</dd>{% endif %}
  </dl>
</section>

<section class="panel green">
  <div class="panel-head">
    <h2>ingredients</h2>
    <span class="ctx">{{ (recipe.recipeIngredient or []) | length }} items</span>
  </div>
  {% if recipe.recipeIngredient %}
    <ul style="list-style: none; padding: 0; margin: 0;">
      {% for ing in recipe.recipeIngredient %}
      <li style="padding: 4px 0; border-bottom: 1px dashed var(--line); color: var(--bone);">
        {% if ing.display %}{{ ing.display }}{% else %}{{ ing.note or '' }}{% endif %}
      </li>
      {% endfor %}
    </ul>
  {% else %}
    <p class="muted">no ingredients listed.</p>
  {% endif %}
</section>

<section class="panel">
  <div class="panel-head">
    <h2>instructions</h2>
  </div>
  {% if recipe.recipeInstructions %}
    <ol>
      {% for step in recipe.recipeInstructions %}
      <li style="margin: .8em 0; color: var(--bone);">{{ step.text }}</li>
      {% endfor %}
    </ol>
  {% else %}
    <p class="muted">no instructions listed.</p>
  {% endif %}
</section>

<div class="btn-row">
  <a class="btn btn-purple" href="/recipes">← back to grimoire</a>
  <button id="pick-toggle" type="button" class="btn {% if picked %}btn-primary{% endif %}"
          data-slug="{{ recipe.slug }}" data-name="{{ recipe.name }}"
          onclick="togglePick(this)">
    🍄 {% if picked %}pinned · remove{% else %}pin for ai plan{% endif %}
  </button>
  <a class="btn" href="{{ mealie_url }}" target="_blank" rel="noopener">view in mealie ↗</a>
</div>

<script>
async function togglePick(btn) {
  const slug = btn.dataset.slug;
  const name = btn.dataset.name;
  const isOn = btn.classList.contains('btn-primary');
  btn.disabled = true;
  try {
    const r = await fetch(`/api/picks/${encodeURIComponent(slug)}`, {
      method: isOn ? 'DELETE' : 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: isOn ? null : JSON.stringify({ name })
    });
    if (!r.ok) throw new Error(r.status);
    btn.classList.toggle('btn-primary');
    btn.innerHTML = btn.classList.contains('btn-primary')
      ? '🍄 pinned · remove'
      : '🍄 pin for ai plan';
  } catch (e) {
    /* leave as-is */
  } finally {
    btn.disabled = false;
  }
}
</script>

{% endblock %}