{% extends "base.html" %}
{% from '_comments.html' import render_comments %}
{% from '_featured_image.html' import featured_image_block %}
{% from '_archive.html' import archive_button, archived_chip %}
{% 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">{{ species.name }}{{ archived_chip(species.is_archived) }}</span>
</nav>

{{ featured_image_block('species', species.id, species.featured_image_path, species.name) }}

<div class="zone-header">
  <h1>
    <span class="editable" data-entity="species" data-id="{{ species.id }}"
          data-field="name" data-type="text"
          data-current-value="{{ species.name }}">{{ species.name }}</span>
    <span class="species-common">(<span class="editable" data-entity="species" data-id="{{ species.id }}"
          data-field="common_name" data-type="text"
          data-current-value="{{ species.common_name or '' }}"
          data-placeholder="— common name —">{{ species.common_name or '— common name —' }}</span>)</span>
  </h1>
  <div class="zone-header-actions">
    <a href="/varieties/new?species_id={{ species.id }}" class="btn small">+ Variety</a>
    {{ archive_button('species', species.id, species.is_archived, '/species/' ~ species.id) }}
  </div>
</div>

<div class="species-kind-row">
  <span class="chip type-species-type type-{{ species.type or 'plant' }}">
    <span class="editable" data-entity="species" data-id="{{ species.id }}"
          data-field="type" data-type="select"
          data-options='[["plant","Plant"],["animal","Animal"]]'
          data-current-value="{{ species.type or 'plant' }}">{{ (species.type or 'plant')|capitalize }}</span>
  </span>
  <span class="chip type-species-fn fn-{{ species.primary_function or 'edible' }}">
    <span class="editable" data-entity="species" data-id="{{ species.id }}"
          data-field="primary_function" data-type="select"
          data-options='[["edible","Edible"],["ornamental","Ornamental"],["support","Support"],["weed","Weed"],["beneficial","Beneficial"],["pest","Pest"]]'
          data-current-value="{{ species.primary_function or 'edible' }}">{{ (species.primary_function or 'edible')|capitalize }}</span>
  </span>
</div>

<form class="spacing-inline" method="post" action="/species/{{ species.id }}/spacing">
  <span class="spacing-inline-label">Sketch spacing:</span>
  <input type="number" name="plants_per_unit" min="1" step="1" class="spacing-input"
         value="{{ species.plants_per_unit or 1 }}" aria-label="Plants per unit">
  <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 or 1.0 }}" aria-label="Square feet per unit">
  <span>sq.ft</span>
  <button type="submit" class="btn small">Save</button>
  <span class="meta small spacing-inline-hint">Applies to all varieties unless they override.</span>
</form>

<section class="section">
  <h2>Overview <a class="overview-history-link" href="/overview-history/species/{{ species.id }}">history</a></h2>
  <div class="overview-block current">
    <span class="editable editable-block" data-entity="species" data-id="{{ species.id }}"
          data-field="description" data-type="textarea"
          data-current-value="{{ species.description or '' }}"
          data-placeholder="+ add overview">{{ species.description or '+ add overview' }}</span>
  </div>
</section>

<section class="section">
  <h2>Varieties ({{ varieties|length }})</h2>
  {% if varieties %}
  <ul class="entity-list">
    {% for v in varieties %}
    <li class="entity-card{% if v.is_archived %} is-archived{% endif %}">
      <a href="/varieties/{{ v.id }}" class="entity-card-link">
        <strong>{{ v.name }}</strong>
        {% if v.is_archived %}<span class="archived-chip">Archived</span>{% endif %}
        {% if v.description %}<div class="note-preview">{{ v.description[:140] }}{% if v.description|length > 140 %}&hellip;{% endif %}</div>{% endif %}
      </a>
    </li>
    {% endfor %}
  </ul>
  {% else %}
  <p class="empty small">No varieties yet for this species.</p>
  {% endif %}
</section>

<section class="section">
  <h2>Plants</h2>
  <p class="meta">{{ plant_count }} plant{{ '' if plant_count == 1 else 's' }} of this species across all plantings.</p>
</section>

{{ render_comments(species_comments, 'species', species.id, '/species/' ~ species.id, include_children=include_children, include_related=include_related, supports_children=supports_children) }}

<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>
{% endblock %}