{% load static %}

{% if node.type == 'app' %}
    <details {% if current_app_slug == node.app_label %}open{% endif %} class="{% if node.children %}has-children{% endif %}">
        <summary class="shelf-name">
            <span class="node-label">
                <span class="node-icon">
                    <img src="{% static 'django_site_documentation/svg/folder.svg' %}" alt="" width="14" height="14">
                </span>
                <span class="node-label-text">{{ node.title }}</span>
                {% if user.is_superuser %}
                <span class="node-actions">
                    <button class="action-btn" onclick="createFolder('{% url 'django_site_doc_create_folder_root' node.app_label %}')" title="Create Subfolder">
                        <img src="{% static 'django_site_documentation/svg/plus-folder.svg' %}" alt="New Folder" width="14" height="14">
                    </button>
                    <button class="action-btn" onclick="createFile('{% url 'django_site_doc_create_file_root' node.app_label %}')" title="Create Page">
                        <img src="{% static 'django_site_documentation/svg/plus-file.svg' %}" alt="New File" width="14" height="14">
                    </button>
                </span>
                {% endif %}
            </span>
        </summary>
        {% if node.children %}
        <ul class="chapter-list">
            {% for child_slug, child in node.children.items %}
            <li class="chapter-item">
                {% include 'django_site_documentation/sidebar_node.html' with node=child depth=depth|add:1 %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </details>

{% elif node.type == 'folder' %}
    <details {% if node.url_path in trail_paths %}open{% endif %} class="{% if node.children %}has-children{% endif %}">
        <summary class="chapter-name">
            <span class="node-label">
                <span class="node-icon">
                    <img src="{% static 'django_site_documentation/svg/folder.svg' %}" alt="" width="14" height="14">
                </span>
                <a href="{% url 'django_site_doc_page_by_path' node.app_label node.url_path %}" class="node-label-text">{{ node.title }}</a>
                {% if user.is_superuser %}
                <span class="node-actions">
                    <button class="action-btn" onclick="createFile('{% url 'django_site_doc_create_file' node.app_label node.url_path %}')" title="Create Page">
                        <img src="{% static 'django_site_documentation/svg/plus-file.svg' %}" alt="New File" width="14" height="14">
                    </button>
                    <button class="action-btn action-btn-danger" onclick="deleteElement('{% url 'django_site_doc_delete' node.app_label node.url_path %}', 'folder')" title="Delete Folder">
                        <img src="{% static 'django_site_documentation/svg/trash.svg' %}" alt="Delete" width="14" height="14">
                    </button>
                </span>
                {% endif %}
            </span>
        </summary>
        {% if node.children %}
        <ul class="page-list">
            {% for child_slug, child in node.children.items %}
            <li class="page-item">
                {% include 'django_site_documentation/sidebar_node.html' with node=child depth=depth|add:1 %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </details>

{% elif node.type == 'page' %}
    <span class="node-label page-link-wrapper">
        <span class="node-icon">
            <img src="{% static 'django_site_documentation/svg/plus-file.svg' %}" alt="" width="14" height="14">
        </span>
        <a href="{% if node.url_path %}{% url 'django_site_doc_page_by_path' node.app_label node.url_path %}{% else %}{% url 'django_site_doc_shelf' node.app_label %}{% endif %}"
           class="page-link{% if current_path == node.url_path %} active{% endif %}">
            {{ node.title }}
        </a>
        {% if user.is_superuser %}
        <span class="node-actions">
            <button class="action-btn action-btn-danger" onclick="deleteElement('{% url 'django_site_doc_delete' node.app_label node.edit_path %}', 'page')" title="Delete Page">
                <img src="{% static 'django_site_documentation/svg/trash.svg' %}" alt="Delete" width="14" height="14">
            </button>
        </span>
        {% endif %}
    </span>
{% endif %}