{#- chirp-ui: Nav tree component
    Hierarchical navigation for docs sidebar, admin nav, settings tree.
    Data-in: items = [{title, href?, children?, active?}].
    Uses native <details> for expand/collapse. No framework-specific helpers.

    Named slot: header (version selector, search, etc.).

    Usage:
        from "chirpui/nav_tree.html" import nav_tree

        call nav_tree(items=items, show_icons=false)
            slot header: version selector, search
        end
-#}

{% def nav_tree_item_content(item, show_icons=false) %}
{% if show_icons and item.get("icon") %}
<span class="chirpui-nav-tree__icon">{{ item.icon | icon }}</span>
{% end %}
<span class="chirpui-nav-tree__title">{{ item.title }}</span>
{% end %}

{% def nav_tree(items, show_icons=false, cls="") %}
<nav class="chirpui-nav-tree{{ " " ~ cls if cls else "" }}" aria-label="Navigation">
    <div class="chirpui-nav-tree__header">{% slot header %}</div>
    <ul class="chirpui-nav-tree__list">
        {% for item in items %}
        <li class="chirpui-nav-tree__item">
            {% if item.get("children") %}
            <details class="chirpui-nav-tree__node"{% if item.get("active") or item.get("open") %} open{% end %}>
                <summary class="chirpui-nav-tree__label">
                    {% if item.get("href") %}
                    <a href="{{ item.href }}" class="chirpui-nav-tree__link{{ " chirpui-nav-tree__link--active" if item.get("active") else "" }}"{% if item.get("active") %} aria-current="page"{% end %}>{{ nav_tree_item_content(item, show_icons) }}</a>
                    {% else %}
                    <span class="chirpui-nav-tree__text">{{ nav_tree_item_content(item, show_icons) }}</span>
                    {% end %}
                </summary>
                {{ nav_tree_items(item.children, show_icons) }}
            </details>
            {% else %}
            {% if item.get("href") %}
            <a href="{{ item.href }}" class="chirpui-nav-tree__link chirpui-nav-tree__link--leaf{{ " chirpui-nav-tree__link--active" if item.get("active") else "" }}"{% if item.get("active") %} aria-current="page"{% end %}>{{ nav_tree_item_content(item, show_icons) }}</a>
            {% else %}
            <span class="chirpui-nav-tree__text chirpui-nav-tree__text--leaf">{{ nav_tree_item_content(item, show_icons) }}</span>
            {% end %}
            {% end %}
        </li>
        {% end %}
    </ul>
</nav>
{% end %}

{% def nav_tree_items(items, show_icons) %}
<ul class="chirpui-nav-tree__list chirpui-nav-tree__list--nested">
    {% for item in items %}
    <li class="chirpui-nav-tree__item">
        {% if item.get("children") %}
        <details class="chirpui-nav-tree__node"{% if item.get("active") or item.get("open") %} open{% end %}>
            <summary class="chirpui-nav-tree__label">
                {% if item.get("href") %}
                <a href="{{ item.href }}" class="chirpui-nav-tree__link{{ " chirpui-nav-tree__link--active" if item.get("active") else "" }}"{% if item.get("active") %} aria-current="page"{% end %}>{{ nav_tree_item_content(item, show_icons) }}</a>
                {% else %}
                <span class="chirpui-nav-tree__text">{{ nav_tree_item_content(item, show_icons) }}</span>
                {% end %}
            </summary>
            {{ nav_tree_items(item.children, show_icons) }}
        </details>
        {% else %}
        {% if item.get("href") %}
        <a href="{{ item.href }}" class="chirpui-nav-tree__link chirpui-nav-tree__link--leaf{{ " chirpui-nav-tree__link--active" if item.get("active") else "" }}"{% if item.get("active") %} aria-current="page"{% end %}>{{ nav_tree_item_content(item, show_icons) }}</a>
        {% else %}
        <span class="chirpui-nav-tree__text chirpui-nav-tree__text--leaf">{{ nav_tree_item_content(item, show_icons) }}</span>
        {% end %}
        {% end %}
    </li>
    {% end %}
</ul>
{% end %}