{% extends "base.html" %}
{% from '_picker.html' import picker %}
{% block content %}
<nav class="breadcrumbs">
  <a href="/catalog">Catalog</a>
  <span class="sep">&rsaquo;</span>
  <a href="/varieties">Varieties</a>
  <span class="sep">&rsaquo;</span>
  <span class="current">{% if variety %}{{ variety.name }}{% else %}New{% endif %}</span>
</nav>
<h1>{% if variety %}Edit variety{% else %}New variety{% endif %}</h1>
<form method="post" action="{% if variety %}/varieties/{{ variety.id }}{% else %}/varieties{% endif %}">
  <label>Name
    <input type="text" name="name" value="{{ variety.name if variety else '' }}" required autofocus placeholder="Evelyn, San Marzano, Honeycrisp...">
  </label>
  <label>Species
    {{ picker('species_id', selected_species_id, species_choices, '— none —') }}
  </label>
  <fieldset class="spacing-field">
    <legend>Sketch spacing override</legend>
    <p class="meta small">
      Leave blank to inherit the species default
      {%- if species_default %}
      (currently <strong>{{ species_default.plants_per_unit }} per {{ species_default.space_per_unit_sqft }} sq.ft</strong>){%- endif -%}
      . Override only if this variety needs different spacing (e.g., a dwarf cultivar).
    </p>
    <div class="spacing-row">
      <input type="number" name="plants_per_unit" min="1" step="1" class="spacing-input"
             value="{{ variety.plants_per_unit if variety and variety.plants_per_unit else '' }}"
             placeholder="{{ species_default.plants_per_unit if species_default else '1' }}">
      <span>per</span>
      <input type="number" name="space_per_unit_sqft" min="0.5" step="0.5" class="spacing-input"
             value="{{ variety.space_per_unit_sqft if variety and variety.space_per_unit_sqft else '' }}"
             placeholder="{{ species_default.space_per_unit_sqft if species_default else '1.0' }}">
      <span>sq.ft</span>
    </div>
  </fieldset>
  <label>Overview
    {% if variety %}<a class="overview-history-link" href="/overview-history/variety/{{ variety.id }}">history</a>{% endif %}
    <textarea name="description" rows="10" placeholder="What you'd want a new gardener to know about this variety: traits, days to maturity, your history with it, intent. Edit as your understanding evolves. For dated observations, use Commentary on the variety page.">{{ variety.description if variety else '' }}</textarea>
  </label>
  <div class="form-actions">
    <button type="submit" class="btn primary">Save</button>
    <a href="{% if variety %}/varieties/{{ variety.id }}{% else %}/varieties{% endif %}" class="btn ghost">Cancel</a>
  </div>
</form>
{% if variety %}
<form method="post" action="/varieties/{{ variety.id }}/delete" class="danger-zone" onsubmit="return confirm('Delete variety {{ variety.name }}? Plantings referencing it will be unlinked.')">
  <button type="submit" class="btn danger">Delete variety</button>
</form>
{% endif %}
{% endblock %}
{% block scripts %}
<script src="/static/area-picker.js" defer></script>
{% endblock %}