{% extends "base.html" %}
{% block head %}
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js" defer></script>
{% endblock %}
{% block content %}
<nav class="breadcrumbs">
  <a href="/">Areas</a>
  <span class="sep">&rsaquo;</span>
  <span class="current">Rearrange</span>
</nav>
<h1>Rearrange areas</h1>
<p class="meta small">Drag the <span class="handle-example">&#9776;</span> handle to re-nest. Changes save automatically.</p>

<div class="tree-toolbar">
  <div class="tree-search-wrap">
    <input type="search" id="tree-search" placeholder="Search areas by name..." autocomplete="off">
    <button type="button" id="tree-search-clear" class="link" hidden>clear</button>
  </div>
  <button type="button" id="tree-expand-all" class="btn ghost small">Expand all</button>
  <button type="button" id="tree-collapse-all" class="btn ghost small">Collapse all</button>
</div>

{% if not areas_tree %}
<p class="empty">No areas yet.</p>
{% endif %}

<ul class="area-tree area-children" data-parent-id="">
{% for area in areas_tree recursive %}
  <li class="area-node" data-id="{{ area.id }}">
    <details {% if loop.depth0 < 2 %}open{% endif %}>
      <summary>
        <span class="drag-handle" title="Drag to move">&#9776;</span>
        <a href="/areas/{{ area.id }}" class="node-name">{{ area.name }}</a>
        <span class="node-meta">
          {% if area.children %}<span class="chip">{{ area.children|length }} sub</span>{% endif %}
          {% set pc = plant_counts.get(area.id, 0) %}
          {% if pc %}<span class="chip">{{ pc }} plant{{ '' if pc == 1 else 's' }}</span>{% endif %}
        </span>
      </summary>
      <div class="tree-body">
        <ul class="area-children" data-parent-id="{{ area.id }}">
          {{ loop(area.children) }}
        </ul>
      </div>
    </details>
  </li>
{% endfor %}
</ul>
{% endblock %}
{% block scripts %}
<script src="/static/tree.js" defer></script>
<script src="/static/tree-search.js" defer></script>
{% endblock %}