{% extends 'base.html' %}
{% block content %}
<section class="card search-card">
  <div class="section-heading">
    <div>
      <p class="section-label">Recipe search</p>
      <h2>Tell Doris what sort of dinner you want</h2>
    </div>
  </div>
  <form id="search-form" class="stack-form">
    <label>Search request
      <textarea id="search-query" rows="3" placeholder="Asian inspired using ground beef with potatoes"></textarea>
    </label>
    <button type="submit">Find recipe suggestions</button>
  </form>
  <div class="search-examples">
    <p class="muted">Example full searches:</p>
    <div class="chip-list">
      <button type="button" class="ghost example-query" data-query="Asian inspired using ground beef with potatoes">Asian inspired using ground beef with potatoes</button>
      <button type="button" class="ghost example-query" data-query="Irish inspired with cabbage and potatoes">Irish inspired with cabbage and potatoes</button>
      <button type="button" class="ghost example-query" data-query="Middle Eastern inspired using ground beef">Middle Eastern inspired using ground beef</button>
      <button type="button" class="ghost example-query" data-query="Italian inspired with chicken and spinach">Italian inspired with chicken and spinach</button>
    </div>
  </div>
</section>

<section class="card search-card">
  <div class="section-heading">
    <div>
      <p class="section-label">Direct link</p>
      <h2>Paste a recipe URL for Doris to ingest</h2>
    </div>
  </div>
  <form id="url-form" class="stack-form">
    <label>Recipe URL
      <input id="recipe-url" type="url" placeholder="https://example.com/recipe">
    </label>
    <button type="submit">Ingest recipe link</button>
  </form>
</section>

<section class="card">
  <div class="section-heading">
    <div>
      <p class="section-label">Results</p>
      <h2>Candidate recipes</h2>
    </div>
  </div>
  <p id="search-status" class="muted"></p>
  <div id="search-results" class="suggestion-grid muted">Search for something to load recipe cards.</div>
</section>
{% endblock %}