{% extends "base.html" %}
{% block content %}
<nav class="breadcrumbs">
  <a href="/catalog">Catalog</a>
  <span class="sep">&rsaquo;</span>
  <a href="/species">Species</a>
  <span class="sep">&rsaquo;</span>
  <span class="current">{% if species %}{{ species.name }}{% else %}New{% endif %}</span>
</nav>
<h1>{% if species %}Edit species{% else %}New species{% endif %}</h1>
<form method="post" action="{% if species %}/species/{{ species.id }}{% else %}/species{% endif %}">
  <label>Name (scientific or generic)
    <input type="text" name="name" value="{{ species.name if species else '' }}" required autofocus placeholder="Strawberry, Tomato, Apple...">
  </label>
  <label>Common name (optional)
    <input type="text" name="common_name" value="{{ species.common_name if species else '' }}" placeholder="Garden strawberry, Beefsteak tomato">
  </label>
  {%- set cur_type = species.type if species else 'plant' -%}
  {%- set cur_fn = species.primary_function if species else 'edible' -%}
  <div class="form-row">
    <label class="grow">Type
      <select name="type" data-species-type>
        {% for t in SPECIES_TYPES %}
        <option value="{{ t }}"{% if cur_type == t %} selected{% endif %}>{{ t|capitalize }}</option>
        {% endfor %}
      </select>
    </label>
    <label class="grow">Primary function
      <select name="primary_function" data-species-function>
        {% for t, fns in SPECIES_FUNCTION_OPTIONS.items() %}
          {% for fn in fns %}
        <option value="{{ fn }}" data-species-type="{{ t }}"{% if cur_type == t and cur_fn == fn %} selected{% endif %}>{{ fn|capitalize }}</option>
          {% endfor %}
        {% endfor %}
      </select>
    </label>
  </div>
  <script>
    (function () {
      var typeSel = document.querySelector('[data-species-type]');
      var fnSel = document.querySelector('[data-species-function]');
      if (!typeSel || !fnSel) return;
      function syncFunctionOptions() {
        var t = typeSel.value;
        var first = null;
        var currentValid = false;
        Array.prototype.forEach.call(fnSel.options, function (opt) {
          var matches = opt.dataset.speciesType === t;
          opt.hidden = !matches;
          opt.disabled = !matches;
          if (matches) {
            if (first === null) first = opt;
            if (opt.value === fnSel.value) currentValid = true;
          }
        });
        if (!currentValid && first) fnSel.value = first.value;
      }
      typeSel.addEventListener('change', syncFunctionOptions);
      syncFunctionOptions();
    })();
  </script>
  <fieldset class="spacing-field">
    <legend>Sketch spacing</legend>
    <p class="meta small">How densely this species plants. Format: <code>N plants per S sq.ft</code>. Examples: 1 per 2 sq.ft (tomato), 3 per 0.5 sq.ft (carrots). Varieties can override.</p>
    <div class="spacing-row">
      <input type="number" name="plants_per_unit" min="1" step="1" class="spacing-input"
             value="{{ species.plants_per_unit if species and species.plants_per_unit else 1 }}">
      <span>per</span>
      <input type="number" name="space_per_unit_sqft" min="0.5" step="0.5" class="spacing-input"
             value="{{ species.space_per_unit_sqft if species and species.space_per_unit_sqft else 1.0 }}">
      <span>sq.ft</span>
    </div>
  </fieldset>
  <label>Overview
    {% if species %}<a class="overview-history-link" href="/overview-history/species/{{ species.id }}">history</a>{% endif %}
    <textarea name="description" rows="10" placeholder="What you'd want a new gardener to know about this species: your history with it, methods you've tried, what works for you, intent. Edit as your understanding evolves. For dated observations, use Commentary on the species page.">{{ species.description if species else '' }}</textarea>
  </label>
  <div class="form-actions">
    <button type="submit" class="btn primary">Save</button>
    <a href="{% if species %}/species/{{ species.id }}{% else %}/species{% endif %}" class="btn ghost">Cancel</a>
  </div>
</form>
{% if species %}
<form method="post" action="/species/{{ species.id }}/delete" class="danger-zone" onsubmit="return confirm('Delete species {{ species.name }}? Varieties referencing it will be unlinked.')">
  <button type="submit" class="btn danger">Delete species</button>
</form>
{% endif %}
{% endblock %}