{% macro slugify(text) %}
{%- set result = text | lower | replace('[^a-z0-9]+', '-') | replace('-+', '-') | trim -%}
{%- endmacro %}

<div class="nav-search">
    <input type="text" id="nav-search" placeholder="Search endpoints..." onkeyup="filterNav(this.value)">
</div>

<nav class="nav-menu">
    {% for tag, tag_endpoints in grouped_endpoints.items() %}
    <div class="nav-group">
        <button class="nav-group-toggle" onclick="toggleNavGroup(this)">
            <span class="nav-group-icon">▶</span>
            <span class="nav-group-name">{{ tag }}</span>
            <span class="nav-group-count">{{ tag_endpoints | length }}</span>
        </button>
        <ul class="nav-group-items">
            {% for endpoint in tag_endpoints %}
            <li class="nav-item">
                <a href="#endpoint-{{ endpoint.path | lower | replace('[^a-z0-9]+', '-') | replace('-+', '-') | trim }}-{{ endpoint.method.value | lower }}" 
                   class="nav-link"
                   onclick="scrollToEndpoint(event, '{{ endpoint.path | lower | replace('[^a-z0-9]+', '-') | replace('-+', '-') | trim }}-{{ endpoint.method.value | lower }}')">
                    <span class="nav-method nav-method-{{ endpoint.method.value | lower }}">{{ endpoint.method.value }}</span>
                    <span class="nav-path">{{ endpoint.path }}</span>
                </a>
            </li>
            {% endfor %}
        </ul>
    </div>
    {% endfor %}
</nav>