{% import "helpers/ui.nunj" as ui %}

{% if not noLayout %}
{% extends "layouts/skeleton.nunj" %}
{% endif %}

{% block page %}
{% if noLayout %}
<div id="main-content">{% block content %}{% endblock %}</div>
{% else %}
<header class="fr-header">
    <div class="fr-header-inner">
        <div class="fr-header-unit">
            <button class="ToggleButton is-inactive fr-header-navButton">
                <span class="ToggleButton-active">{{ ui.svg('close', '#fff', '16px', '16px') }}</span>
                <span class="ToggleButton-inactive">{{ ui.svg('menu', '#fff', '20px', '20px') }}</span>
            </button>
        </div>
        <div class="fr-header-unit"><span class="fr-header-title">{{ fractal.config.project.title }}</span></div>
    </div>
</header>

<div class="fr-body fr-body--withSidebar">

    <div class="fr-sidebar">
        <div class="fr-inner">

            <div class="SidebarItem SidebarItem--nav">

                <div class="MainNav" data-behaviour="main-nav">
                    <ul class="MainNav-root">
                    {% for item in navigation %}
                    <li class="MainNav-item MainNav-item--section MainNav-item--depth0{% if item.handle == section.handle or item.handle == page.handle %} is-current is-open{% endif %}">
                        <a class="MainNav-itemLabel MainNav-link MainNav-sectionToggle" href="{{item.url}}" data-pjax>{{ item.label }}</a>
                        {% if item.handle == 'components' and components.length %}
                        <div class="MainNav-sectionPanel">
                            {# <div class="MainNav-sectionFilter">
                                <label class="MainNav-filterLabel" for="component-filter">Filter:</label> <select class="MainNav-filterSelect" id="component-filter" name="component-filter">
                                    <option value="__all__">All</option>
                                    {% for status in fractal.statuses %}<option value="{{ status.name }}">{{ status.label }}</option>{% endfor %}
                                </select>
                            </div> #}
                            <ul class="MainNav-sectionNav MainNav-sectionNav--components">
                                <li class="MainNav-item MainNav-item--sub MainNav-item--list{% if list %} is-current{% endif %}">
                                    <a class="MainNav-itemLabel MainNav-link" href="/components/list/all" data-pjax>
                                        <span>All Components</span>
                                    </a>
                                </li>
                            </ul>
                            <ul class="MainNav-sectionNav MainNav-sectionNav--components">
                                {{ componentsNav(components, component, '/components') }}
                            </ul>
                        </div>
                        {% elif item.items and item.items|length > 1 %}
                        <div class="MainNav-sectionPanel">
                            <ul class="MainNav-sectionNav MainNav-sectionNav--pages">
                            {{ pagesNav(item.items, page, '/') }}
                            </ul>
                        </div>
                        {% endif %}
                    </li>
                    {% endfor %}
                    </ul>
                </div>

            </div>

            {% block sidebar %}{% endblock %}

        </div>
    </div>

    <div class="fr-content" id="main-content">
    {% block content %}{% endblock %}
    </div> <!-- .fr-content -->

</div> <!-- .fr-body -->
{% endif %}
{% endblock %}

{% macro componentsNav(items, current, baseUrl) %}
    {% for item in items %}
        {% if item.type == 'group' %}
        <li class="MainNav-item MainNav-item--group">
            <h4 class="MainNav-itemLabel MainNav-heading MainNav-subSectionToggle">{{ item.label }}</h4>
            <ul class="MainNav-children">
            {{ componentsNav(item.children, current, baseUrl) }}
            </ul>
        </li>
        {% else %}
        <li class="MainNav-item MainNav-item--sub MainNav-item--component{% if component.handle == item.handle %} is-current{% endif %}" data-status="{{ item.status.name }}">
            <a class="MainNav-itemLabel MainNav-link" href="{{ baseUrl }}/detail/{{ item.handlePath }}" data-pjax>
                <span>{{ item.label }}</span> {{ ui.status(item.status) }}
            </a>
        </li>
        {% endif %}
    {% endfor %}
{% endmacro %}

{% macro pagesNav(items, current, baseUrl) %}
    {% for item in items %}
        {% if items|length > 1 or item.index == false %}
        <li class="MainNav-item MainNav-item--sub MainNav-item--page{% if page.handle == item.handle %} is-current{% endif %}">
            <a class="MainNav-itemLabel MainNav-link" href="{{ baseUrl }}{{ item.path }}" data-pjax><span>{{ item.label }}</span></a>
        </li>
        {% endif %}
    {% endfor %}
{% endmacro %}