{% load spellbook_tags %}
{% for key, data in items.items %}
    <li class="toc-item{% if data.url == current_url %} active{% endif %}" data-toc-id="{{ key }}">
        <div class="toc-item-header">
            {% if data.children %}
                <button class="toc-toggle sb-text-text" aria-label="Toggle section">
                    <svg class="toc-arrow" viewBox="0 0 24 24" width="12" height="12">
                        <path d="M7 10l5 5 5-5H7z" />
                    </svg>
                </button>
                {% if data.url %}
                    <a href="{% spellbook_url data.url %}" class="toc-link has-children sb-text-secondary sb-hover:bg-neutral-25 sb-hover:text-text sb-transition-all{% if data.url == current_url %} sb-bg-primary-25 sb-primary{% endif %}">{{ data.title }}</a>
                {% else %}
                    <a class="toc-link has-children sb-text-secondary sb-hover:bg-neutral-25 sb-hover:text-text sb-transition-all">{{ data.title }}</a>
                {% endif %}
            {% else %}
            {% if data.url %}
                <a href="{% spellbook_url data.url %}"
                   class="toc-link sb-text-secondary sb-hover:bg-neutral-25 sb-hover:text-text sb-transition-all{% if data.url == current_url %} sb-bg-primary-25 sb-primary{% endif %}">{{ data.title }}</a>
            {% else %}
                <span class="toc-section sb-text-text">{{ data.title }}</span>
            {% endif %}
            {% endif %}
        </div>
        {% if data.children %}
            <ul class="toc-sublist sb-border-neutral-25 sb-border-l">
                {% include "django_spellbook/recursive/_toc_sidebar.html" with items=data.children %}
            </ul>
        {% endif %}
    </li>
{% endfor %}
