{% extends 'base.html' %}
{% block content %}
<section class="hero-grid">
  <article class="card spotlight">
    <p class="section-label">Household taste</p>
    <h2>Leanne picks. Doris learns.</h2>
    <p class="muted">Queue up web recipes, teach the household profile with yes/no decisions, and keep KitchenOwl for the final recipes worth keeping.</p>
    <div class="action-row">
      <button type="button" id="seed-button">Seed suggestion queue</button>
      <a class="button-link" href="/search">Search a recipe idea</a>
    </div>
  </article>
  <article class="card stats-card">
    <div class="stats-grid">
      <div><span>Suggested</span><strong id="count-suggested">0</strong></div>
      <div><span>Approved</span><strong id="count-approved">0</strong></div>
      <div><span>Saved</span><strong id="count-saved">0</strong></div>
      <div><span>Rejected</span><strong id="count-rejected">0</strong></div>
      <div><span>Plans</span><strong id="count-plans">0</strong></div>
      <div><span>Failures</span><strong id="count-failed-searches">0</strong></div>
    </div>
    <p class="muted" id="backend-note">Loading state…</p>
  </article>
</section>

<section class="split-grid">
  <article class="card">
    <div class="section-heading">
      <div>
        <p class="section-label">Soft blacklist</p>
        <h2>Terms to push down</h2>
      </div>
    </div>
    <form id="blacklist-form" class="inline-form">
      <input type="text" id="blacklist-name" placeholder="Add ingredient or term">
      <button type="submit">Add / enable</button>
    </form>
    <div id="blacklist-items" class="chip-list muted">Loading…</div>
  </article>

  <article class="card">
    <div class="section-heading">
      <div>
        <p class="section-label">Preference notes</p>
        <h2>Household guidance</h2>
      </div>
    </div>
    <form id="settings-form" class="stack-form">
      <label>Notes
        <textarea id="profile-notes" rows="4" placeholder="Budget, texture issues, favourite cuisines, or anything else useful."></textarea>
      </label>
      <label>Auto-import threshold
        <input type="number" id="auto-import-threshold" min="50" max="100">
      </label>
      <label class="checkbox-row">
        <input type="checkbox" id="auto-import-enabled">
        <span>Allow auto-import when Doris is extremely confident</span>
      </label>
      <button type="submit">Save settings</button>
    </form>
  </article>
</section>

<section class="card">
  <div class="section-heading">
    <div>
      <p class="section-label">Queue</p>
      <h2>Recent recipe suggestions</h2>
    </div>
  </div>
  <div id="suggestion-list" class="suggestion-grid muted">Loading…</div>
</section>

<section class="card">
  <div class="section-heading">
    <div>
      <p class="section-label">Troubleshooting</p>
      <h2>Recent failed searches</h2>
    </div>
    <a class="button-link" href="/failures">Open failure review</a>
  </div>
  <div id="failed-search-preview" class="failure-list muted">Loading…</div>
</section>
{% endblock %}