{# One collection's branch of the pane, fetched when it is opened (11f).

   Each document says where the index stands for it: nothing when it is
   in step, a letter when not, and the sentence as its tooltip. A group
   shows the worst beneath it. The filter is a checkbox and a `:has()`
   rule, so it works without a script.

   The menu follows the thing it acts on, as a sibling: a `<details>`
   inside a `<summary>` is content a summary may not hold, and a menu
   inside a closed folder's `<details>` would be hidden with its
   contents. Every entry is a link or a form, so each works without a
   script; `menu.js` adds right-click and Escape. #}
{% macro mark(shown) %}{% if shown %}<span class="doc-state role-{{ shown.role }}" title="{{ shown.sentence }}">{{ shown.letter }}</span>{% endif %}{% endmacro %}
{% macro menu(name, document_id, add_here, branch=none) %}
<details class="menu">
<summary class="menu-button" aria-label="{{ menu_for(name) }}">{{ icon("ellipsis") }}</summary>
<div class="menu-items">
{% if document_id %}<a class="item" href="/document/{{ tree.collection }}/{{ document_id }}">{{ menu_open }}</a>{% endif %}
{% if document_id %}<form class="copy" action="/copy" method="post">
<input type="hidden" name="collection" value="{{ tree.collection }}">
<input type="hidden" name="document" value="{{ document_id }}">
<button type="submit" class="item">{{ menu_copy }}</button>
</form>{% endif %}
{% if document_id and tree.movable %}<form class="move" action="/move" method="post" hx-post="/move" hx-target="closest .branch" hx-swap="innerHTML">
<input type="hidden" name="collection" value="{{ tree.collection }}">
<input type="hidden" name="document" value="{{ document_id }}">
<input type="text" name="group" list="groups-{{ tree.collection }}" aria-label="{{ move_group_label }}" placeholder="{{ move_group_empty }}">
<button type="submit" class="item">{{ menu_move }}</button>
</form>{% endif %}
<a class="item" href="{{ add_here }}" hx-get="{{ add_here }}" hx-target="#dialog" hx-swap="innerHTML">{{ menu_add_here }}</a>
<form class="index" action="/index" method="post" hx-post="/index" hx-target="#job" hx-swap="innerHTML">
<input type="hidden" name="collection" value="{{ tree.collection }}">
<button type="submit" class="item">{{ menu_index }}</button>
</form>
{% if branch and branch.version and not branch.current %}<form class="make-current" action="/docs/current" method="post" hx-post="/docs/current" hx-target="closest .branch" hx-swap="innerHTML">
<input type="hidden" name="project" value="{{ branch.project }}">
<input type="hidden" name="version" value="{{ branch.version }}">
<button type="submit" class="item">{{ make_current }}</button>
</form>{% endif %}
{% if branch and branch.version %}{% set removal = "/docs/remove-version?project=" ~ (branch.project | urlencode) ~ "&version=" ~ (branch.version | urlencode) %}<a class="item remove-version" href="{{ removal }}" hx-get="{{ removal }}" hx-target="#dialog" hx-swap="innerHTML">{{ menu_remove_version }}</a>{% endif %}
{% if document_id %}{% set removal = "/document/remove?collection=" ~ (tree.collection | urlencode) ~ "&document=" ~ (document_id | urlencode) %}<a class="item remove-document" href="{{ removal }}" hx-get="{{ removal }}" hx-target="#dialog" hx-swap="innerHTML">{{ menu_remove }}</a>{% endif %}
</div>
</details>
{% endmacro %}
{# A group, drawn by its last part and named by its whole path, with its
   own documents first and the groups inside it after, each drawn by this
   same macro. #}
{% macro folder(branch) %}
<li class="group{% if not branch.mark %} quiet{% endif %}" data-group="{{ branch.group }}" data-state="{{ branch.state }}">
<details open>
<summary class="node" title="{{ branch.group }}">{{ icon("chevron-right") }}{{ icon("folder") }}<span class="name">{{ branch.name }}</span>{% if branch.current %}<span class="current-version">{{ current_version }}</span>{% endif %}<span class="count">{{ branch.count }}</span>{{ mark(branch.mark) }}</summary>
<ul class="tree">
{% for shown in branch.entries %}{{ entry(shown, branch.add_here) }}{% endfor %}
{% for child in branch.children %}{{ folder(child) }}{% endfor %}
</ul>
</details>
{{ menu(branch.group, "", branch.add_here, branch) }}
</li>
{% endmacro %}
{% macro entry(shown, add_here) %}
<li class="row{% if not shown.mark %} quiet{% endif %}"{% if shown.document_id %} data-document="{{ shown.document_id }}"{% endif %} data-state="{{ shown.state }}">
{% if shown.document_id %}<a class="node leaf" href="/document/{{ tree.collection }}/{{ shown.document_id }}" title="{{ shown.title }}">{{ icon("file-text") }}<span class="name">{{ shown.title }}</span>{{ mark(shown.mark) }}</a>
{{ menu(shown.title, shown.document_id, add_here) }}
{% else %}<span class="node leaf" title="{{ shown.title }}">{{ icon("file-text") }}<span class="name">{{ shown.title }}</span>{{ mark(shown.mark) }}</span>{% endif %}
</li>
{% endmacro %}
{# The id is what a finished job's redraw looks for, so a branch is
   redrawn only once it has been opened. #}
<div id="pane-branch-{{ tree.collection }}">
{% if problem %}<p class="pane-note role-error">{{ problem }}</p>{% endif %}
{% for note in notes %}<p class="pane-note role-muted">{{ note }}</p>{% endfor %}
{% if tree.attention %}<label class="attention-filter"><input type="checkbox" class="attention-only"> {{ attention_only }}</label>{% endif %}
{% if tree.movable %}<datalist id="groups-{{ tree.collection }}">{% for name in tree.groups %}<option value="{{ name }}">{% endfor %}</datalist>{% endif %}
<ul class="tree">
{% for shown in tree.top.entries %}{{ entry(shown, tree.top.add_here) }}{% endfor %}
{% for branch in tree.branches %}{{ folder(branch) }}{% endfor %}
</ul>
</div>
{# A move changed what the pane counts and what is behind its index. #}
{% if moved %}{% include "shell-redraws.html" %}{% endif %}