{% import "helpers/navigation.nunj" as nav %}

{% set navDepth   = frctl.web.theme.options.nav.depth %}
{% set navSort    = frctl.web.theme.options.nav.sort %}
{% set components = frctl.components.filter(['isHidden', false]).orderBy(navSort) %}
{% if navDepth == 1 %}{% set components = components.squash() %}{% endif %}
{% set components = components.items() %}
{% set pages      = frctl.docs.filter(['isHidden', false]).squash().orderBy(navSort).items() %}

<div class="MainNav" data-behaviour="main-nav">
    <ul class="MainNav-root">
        <li class="MainNav-group">
            <h4 class="MainNav-groupTitle">{{ frctl.components.title }}</h4>
            <ul class="MainNav-sectionNav MainNav-sectionNav--components">
                {{ nav.components(components, component, 1, navDepth, navSort) }}
            </ul>
        </li>
        {% if pages|length > 1 %}
        <li class="MainNav-group">
            <h4 class="MainNav-groupTitle">{{ frctl.docs.title }}</h4>
            <ul class="MainNav-sectionNav MainNav-sectionNav--pages">
                {{ nav.pages(pages, page) }}
            </ul>
        </li>
        {% endif %}
    </ul>
</div>