{% extends "kitchen/base.html" %}
{% block title %}Import recipe{% endblock %}
{% block content %}
<div class="head"><h1>Import a recipe</h1></div>
{% if not preview %}
<form method="post" class="card import-form">{% csrf_token %}
  <input type="hidden" name="action" value="parse">
  <label>Paste recipe text (title, ingredients, steps)
    <textarea name="text" rows="14" placeholder="Lemon Garlic Chicken&#10;Serves 4&#10;&#10;Ingredients&#10;1 1/2 lb chicken thighs&#10;3 cloves garlic, minced&#10;...&#10;&#10;Directions&#10;Heat the oil...">{{ text }}</textarea></label>
  <p class="or">or</p>
  <label>Recipe page URL (reads schema.org Recipe data)
    <input type="url" name="url" value="{{ url }}" placeholder="https://example.com/recipe"></label>
  <button class="btn">Parse &amp; preview</button>
</form>
{% else %}
<form method="post" class="card" id="preview-form">{% csrf_token %}
  <input type="hidden" name="count" value="{{ preview.rows|length }}">
  <input type="hidden" name="source_url" value="{{ preview.source_url }}">
  <div class="fields">
    <label>Title <input name="title" value="{{ preview.title }}" required></label>
    <label>Servings <input type="number" name="servings" min="1" value="{{ preview.servings }}"></label>
    <label>Prep min <input type="number" name="prep" min="0" value="{{ preview.prep }}"></label>
    <label>Cook min <input type="number" name="cook" min="0" value="{{ preview.cook }}"></label>
    <label>Meals <input name="meals" value="{{ preview.meals }}"></label>
    <label>Tags <input name="tags" value="{{ preview.tags }}" placeholder="comma separated"></label>
  </div>
  <h2>Parsed ingredients</h2>
  <p class="muted">Edit the original line and press Re-parse, or correct the fields directly. Rows with a red name were not found in the ingredient database.</p>
  <div class="table-scroll"><table class="parsed">
    <thead><tr><th>Original line</th><th>Qty</th><th>to</th><th>Unit</th><th>Ingredient</th><th>Prep</th><th>Note</th><th>Opt</th><th>Match</th></tr></thead>
    <tbody>
    {% for r in preview.rows %}
      <tr>
        <td><input class="wide" name="raw_{{ forloop.counter0 }}" value="{{ r.raw }}"></td>
        <td><input class="num" name="qty_{{ forloop.counter0 }}" value="{{ r.quantity|default_if_none:''|floatformat:'-3' }}"></td>
        <td><input class="num" name="qmax_{{ forloop.counter0 }}" value="{{ r.quantity_max|default_if_none:''|floatformat:'-3' }}"></td>
        <td><select name="unit_{{ forloop.counter0 }}"><option value=""></option>{% for u in units %}<option {% if u == r.unit %}selected{% endif %}>{{ u }}</option>{% endfor %}</select></td>
        <td><input class="{% if not r.key %}bad{% endif %}" name="name_{{ forloop.counter0 }}" value="{{ r.name }}"></td>
        <td><input name="prep_{{ forloop.counter0 }}" value="{{ r.prep }}"></td>
        <td><input name="note_{{ forloop.counter0 }}" value="{{ r.note }}"></td>
        <td><input type="checkbox" name="optional_{{ forloop.counter0 }}" {% if r.optional %}checked{% endif %}></td>
        <td class="small">{% if r.key %}{{ r.key }} <span class="muted">{{ r.confidence|floatformat:0 }}%</span>{% else %}<span class="badtext">no match</span>{% endif %}</td>
      </tr>
    {% endfor %}
    </tbody>
  </table></div>
  <h2>Steps</h2>
  <textarea name="steps" rows="8">{{ preview.steps }}</textarea>
  <div class="actions">
    <button class="btn ghost" name="action" value="reparse">Re-parse lines</button>
    <button class="btn" name="action" value="save">Save recipe</button>
  </div>
</form>
{% endif %}
{% endblock %}