{% extends "base.html" %}
{% from '_featured_image.html' import featured_image_thumb %}
{% from '_archive.html' import show_archived_toggle %}
{% block content %}
<nav class="breadcrumbs">
  <a href="/catalog">Catalog</a>
  <span class="sep">&rsaquo;</span>
  <span class="current">Species</span>
</nav>
<div class="actions">
  <a class="btn primary" href="/species/new">+ Add species</a>
  <span class="summary">{{ species|length }} species</span>
  {{ show_archived_toggle(show_archived, '/species') }}
</div>

<div class="filter-bar">
  <a href="/species" class="comment-toggle {% if not type_filter %}on{% else %}off{% endif %}">All</a>
  <a href="/species?type=plant" class="comment-toggle {% if type_filter == 'plant' %}on{% else %}off{% endif %}">Plants</a>
  <a href="/species?type=animal" class="comment-toggle {% if type_filter == 'animal' %}on{% else %}off{% endif %}">Animals</a>
</div>

{% if not species %}
<p class="empty">No species yet. Add the things you grow at the species level (e.g. Strawberries, Tomato, Apple).</p>
{% endif %}

<ul class="entity-list">
  {% for s in species %}
  <li class="entity-card{% if s.featured_image_path %} entity-card-with-thumb{% endif %}{% if s.is_archived %} is-archived{% endif %}">
    <a href="/species/{{ s.id }}" class="entity-card-link">
      {{ featured_image_thumb(s.featured_image_path, s.name) }}
      <div class="entity-card-body">
        <div class="entity-card-header">
          <strong>{{ s.name }}</strong>
          <span class="chip type-species-type type-{{ s.type or 'plant' }}">{{ (s.type or 'plant')|capitalize }}</span>
          <span class="chip type-species-fn fn-{{ s.primary_function or 'edible' }}">{{ (s.primary_function or 'edible')|capitalize }}</span>
          {% if counts.get(s.id, 0) %}<span class="chip">{{ counts.get(s.id, 0) }} variet{{ 'y' if counts.get(s.id, 0) == 1 else 'ies' }}</span>{% endif %}
          {% if s.is_archived %}<span class="archived-chip">Archived</span>{% endif %}
        </div>
        {% if s.common_name %}<div class="entity-card-sub">{{ s.common_name }}</div>{% endif %}
        {% if s.description %}<div class="note-preview">{{ s.description[:160] }}{% if s.description|length > 160 %}…{% endif %}</div>{% endif %}
      </div>
    </a>
  </li>
  {% endfor %}
</ul>
{% endblock %}