{% extends 'base.html' %}
{% block content %}
<section class="hero-grid dossier-grid">
  <section class="card evidence-board">
    <div class="section-heading">
      <div>
        <p class="section-label">Import review</p>
        <h2>Flagged KitchenOwl recipe issues</h2>
      </div>
      <span class="pill">Repair queue</span>
    </div>
    <p class="muted case-legend">Use this queue to track recipes that need Doris to clean up a bad import, fix ingredients, or inspect some other KitchenOwl problem.</p>
    <form id="import-flag-form" class="stack-form intake-docket">
      <label>Recipe URL or KitchenOwl link
        <input type="url" id="import-flag-url" placeholder="https://...">
      </label>
      <label>Recipe title (optional)
        <input type="text" id="import-flag-title" placeholder="Recipe title">
      </label>
      <label>Issue type
        <select id="import-flag-type">
          <option value="formatting">Formatting</option>
          <option value="ingredients">Ingredients</option>
          <option value="timings">Timings</option>
          <option value="duplicate">Duplicate</option>
          <option value="other">Other</option>
        </select>
      </label>
      <label>What went wrong
        <textarea id="import-flag-notes" rows="4" placeholder="Describe what needs fixing."></textarea>
      </label>
      <button type="submit">Add to import repair queue</button>
    </form>
  </section>

  <section class="card evidence-board">
    <div class="section-heading">
      <div>
        <p class="section-label">Queue</p>
        <h2>Open and resolved import flags</h2>
      </div>
      <span class="pill">Evidence tags</span>
    </div>
    <div id="import-flags-list" class="failure-list muted dossier-grid">Loading import flags…</div>
  </section>
</section>
{% endblock %}