{% extends "base.html" %}
{% from '_species.html' import species_pill %}
{% block content %}
{%- set base_path = '/' if is_home else '/areas/' ~ current.id -%}
{%- set new_planting_href = '/plantings/new' ~ ('?area=' ~ current.id if current else '') -%}

<nav class="breadcrumbs">
  <a href="/">Garden</a>
  {% for b in breadcrumbs %}
  <span class="sep">&rsaquo;</span>
  {% if not loop.last %}
  <a href="/areas/{{ b.id }}">{{ b.name }}</a>
  {% else %}
  <span class="current">{{ b.name }}</span>
  {% endif %}
  {% endfor %}
</nav>

<div class="tiles-toolbar">
  <div class="tiles-toolbar-left">
    <h1>{{ current.name if current else 'Garden' }}</h1>
    <div class="tiles-meta-line">
      {% if current_dims %}<span>{{ current_dims }}</span>{% endif %}
      {% if current_total %}<span>{{ current_total }} plants</span>{% endif %}
    </div>
  </div>
  <div class="tiles-toolbar-right">
    <div class="status-filter" role="group" aria-label="Planting status filter">
      {% for key, label in [('planted', 'Planted'), ('active', '+ Planned'), ('all', 'All')] %}
      <a href="{{ base_path }}?status={{ key }}"
         class="status-filter-opt{% if status_filter == key %} active{% endif %}">{{ label }}</a>
      {% endfor %}
    </div>
    <a href="{{ new_planting_href }}" class="btn primary small">+ Planting{% if current %} here{% endif %}</a>
  </div>
</div>

{% if current_summary %}
<div class="species-row tiles-current-species">
  {% for s in current_summary %}{{ species_pill(s.name, s.count) }}{% endfor %}
</div>
{% endif %}

{% if children %}
<ul class="tile-grid">
  {% for c in children %}
  <li>
    <a href="/areas/{{ c.id }}{% if status_filter != 'planted' %}?status={{ status_filter }}{% endif %}" class="tile">
      <div class="tile-name">{{ c.name }}</div>
      {% if c.summary %}
      <div class="tile-species">
        {% for s in c.summary[:6] %}{{ species_pill(s.name, s.count) }}{% endfor %}
        {% if c.summary|length > 6 %}<span class="species-more">+{{ c.summary|length - 6 }}</span>{% endif %}
      </div>
      {% else %}
      <div class="tile-empty">—</div>
      {% endif %}
      <div class="tile-foot">
        {% if c.child_count %}<span>{{ c.child_count }} sub</span>{% endif %}
        {% if c.plant_count %}<span>{{ c.plant_count }}p</span>{% endif %}
        {% if c.dims %}<span>{{ c.dims }}</span>{% endif %}
      </div>
    </a>
  </li>
  {% endfor %}
</ul>
{% elif current %}
<p class="empty">
  No sub-areas under {{ current.name }}.
  <a href="/areas/{{ current.id }}">Open the detail page →</a>
</p>
{% endif %}

{% if is_home %}
  {% if recent_plantings %}
  <section class="section">
    <h2>Recent plantings</h2>
    <ul class="entity-list">
      {% for p in recent_plantings %}
      <li class="entity-card">
        <a href="/plantings/{{ p.id }}" class="entity-card-link">
          <div class="entity-card-header">
            <strong>{% if p.year_value %}{{ p.year_value }} — {% endif %}{{ p.name }}</strong>
            <span class="chip">{{ p.plant_count }} plant{{ '' if p.plant_count == 1 else 's' }}</span>
          </div>
          {% if p.source %}<div class="entity-card-sub">{{ p.source }}</div>{% endif %}
        </a>
      </li>
      {% endfor %}
    </ul>
  </section>
  {% endif %}
  <div class="home-footer">
    <a href="/areas/new" class="link">+ Add area</a>
    <a href="/areas/arrange" class="link">Rearrange areas</a>
  </div>
{% endif %}
{% endblock %}