{% extends "base.html" %}
{% block title %}{{ 'Edit' if planting else 'New' }} Planting — Garden{% endblock %}
{% block content %}
<div class="breadcrumbs">
  <a href="/plantings">Plantings</a>
  <span class="sep">&rsaquo;</span>
  <span class="current">{{ planting.name if planting else 'New Planting' }}</span>
</div>

<h1>{{ 'Edit' if planting else 'New' }} Planting</h1>

<form method="post" action="{{ '/plantings/' ~ planting.id if planting else '/plantings' }}" id="planting-form">

  <label>
    Name
    <input type="text" name="name" value="{{ planting.name if planting else '' }}" required autofocus placeholder="e.g. 2026 Tomatoes, Future berry ideas">
  </label>

  {# Status retired by the unplanted-plants model — plantings are always
     'planted' now. Kept as a hidden field so existing form handlers don't
     blow up. #}
  <input type="hidden" name="status" value="planted">

  <p class="form-help">
    To plan plants before putting them in the ground, use the
    <a href="/unplanted">unplanted inventory</a> instead of a planting.
    Plantings now represent the act of planting; create one only when you
    actually put plants in the ground.
  </p>

  <label>
    Year
    <select name="year_id" id="year-select">
      <option value="">-- no year --</option>
      {% for y in year_list %}
      <option value="{{ y.id }}" {% if (planting and planting.year_id == y.id) or (not planting and default_year_id == y.id) %}selected{% endif %}>{{ y.year }}</option>
      {% endfor %}
      <option value="new">+ New year</option>
    </select>
  </label>
  <label id="new-year-label" class="new-year-hidden">
    <input type="number" name="new_year" id="new-year-input" min="2000" max="2099" placeholder="Year (e.g. 2026)">
  </label>

  <label>
    Overview
    {% if planting %}<a class="overview-history-link" href="/overview-history/planting/{{ planting.id }}">history</a>{% endif %}
    <textarea name="notes" rows="3" placeholder="What this planting is about: source, method, intent, anything you'd want a new gardener to understand. Edit as your thinking evolves.">{{ planting.notes if planting else '' }}</textarea>
  </label>

  <div class="plant-cards-header">
    <h2>Plants</h2>
    <button type="button" id="add-row" class="btn ghost small">+ Add</button>
  </div>

  <div id="plant-cards">
    {% for p in plants %}
    <div class="plant-card" data-index="{{ loop.index0 }}">
      <input type="hidden" name="plant_id_{{ loop.index0 }}" value="{{ p.id }}">
      <div class="plant-card-row">
        <label class="plant-field plant-qty">
          <span class="plant-label">Qty</span>
          <input type="text" name="plant_qty_{{ loop.index0 }}" value="{{ p.quantity }}" inputmode="numeric" placeholder="#">
        </label>
        <label class="plant-field plant-species">
          <span class="plant-label">Species</span>
          <div class="field-with-add">
            <select name="plant_species_{{ loop.index0 }}" class="species-select">
              <option value="">--</option>
              {% for s in species_list %}
              <option value="{{ s.id }}" {% if p.species_id == s.id %}selected{% endif %}>{{ s.name }}</option>
              {% endfor %}
            </select>
            <button type="button" class="add-inline-btn" data-type="species" title="New species">+</button>
          </div>
        </label>
        <button type="button" class="remove-row" title="Remove">&times;</button>
      </div>
      <div class="plant-card-row">
        <label class="plant-field plant-variety">
          <span class="plant-label">Variety</span>
          <div class="field-with-add">
            <select name="plant_variety_{{ loop.index0 }}" class="variety-select">
              <option value="">--</option>
              {% for v in variety_list %}
              <option value="{{ v.id }}" data-species-id="{{ v.species_id or '' }}" {% if p.variety_id == v.id %}selected{% endif %}>{{ v.name }}</option>
              {% endfor %}
            </select>
            <button type="button" class="add-inline-btn" data-type="variety" title="New variety">+</button>
          </div>
        </label>
      </div>
      <div class="plant-card-row">
        <label class="plant-field plant-area">
          <span class="plant-label">Area</span>
          <input type="hidden" name="plant_area_{{ loop.index0 }}" value="{{ p.area_id or '' }}" class="area-hidden">
          <input type="text" class="area-search" value="{{ p.area_path if p.area_path else '' }}" placeholder="Search areas..." autocomplete="off">
          <ul class="area-dropdown"></ul>
        </label>
      </div>
      <div class="plant-card-row">
        <label class="plant-field plant-notes">
          <span class="plant-label">Overview</span>
          <textarea name="plant_notes_{{ loop.index0 }}" rows="2" placeholder="Observations, history, considerations...">{{ p.notes or '' }}</textarea>
        </label>
      </div>
    </div>
    {% endfor %}
  </div>

  <div class="plant-add-row">
    <button type="button" id="add-row-bottom" class="btn small">+ Add plant</button>
  </div>

  <input type="hidden" name="plant_count" id="plant-count" value="{{ plants|length }}">

  <div class="form-actions">
    <button type="submit" class="btn primary">{{ 'Save' if planting else 'Create' }} Planting</button>
    <a href="{{ '/plantings/' ~ planting.id if planting else '/plantings' }}" class="btn ghost">Cancel</a>
    {% if planting %}
    <button type="submit" class="btn danger small" style="margin-left:auto"
            formaction="/plantings/{{ planting.id }}/delete" formnovalidate
            onclick="return confirm('Delete this planting and all its plants?')">Delete</button>
    {% endif %}
  </div>
</form>

<!-- Inline creation modal -->
<div id="inline-modal" class="inline-modal" hidden>
  <div class="inline-modal-content">
    <h3 id="inline-modal-title">New</h3>
    <label id="inline-modal-species-label" class="modal-hidden">
      <span>Species</span>
      <select id="inline-modal-species-select"></select>
    </label>
    <label>
      <span>Name</span>
      <input type="text" id="inline-modal-name" placeholder="Name" autocomplete="off">
    </label>
    <div class="inline-modal-actions">
      <button type="button" id="inline-modal-save" class="btn primary small">Add</button>
      <button type="button" id="inline-modal-cancel" class="btn ghost small">Cancel</button>
    </div>
  </div>
</div>

{% endblock %}

{% block scripts %}
<script>
  window.AREA_OPTIONS = {{ area_options | tojson }};
  window.SPECIES_LIST = {{ species_list | tojson }};
  window.VARIETY_LIST = {{ variety_list | tojson }};
</script>
<script src="/static/planting-form.js" defer></script>
{% endblock %}