{% import 'utility.macros.njk' as utility %}


{% macro toggle() %}
  <button data-nav-toggle {{ utility.toggle_button('nav', button='true') }}>
    {{ utility.icon('menu', 'menu', size='nav-icon') }}
  </button>
{% endmacro %}


{% macro menu(
  project,
  byGroup,
  groups,
  orderedGroups,
  activeGroup,
  extraDocs,
  extraLinks,
  watermark=true
) %}
  <nav data-region="nav" {{ utility.toggle_target('nav')}}>
    <form action="search.html">
      <input type="text" name="q" placeholder="Search…" required minlength="3">
    </form>

    <div class="nav-subsection">
      <h3 class="nav-home">
        {% set activeNav = 'is-active' if (activeGroup == none) else 'is-not-active' %}
        <a href="index.html" data-nav="{{ activeNav }}">{{ project }}</a>
      </h3>

      {# Markdown Files, e.g. Changelog, Getting Started #}
      {% if extraDocs and extraDocs|length %}
        <ul>
          {% for extraDoc in extraDocs %}
            {% set activeNav = 'is-active' if (activeGroup == extraDoc.filename) else 'is-not-active' %}
            <li class="nav-item">
              <a href="{{ extraDoc.filename }}.html" data-nav="{{ activeNav }}">{{ extraDoc.name }}</a>
            </li>
          {% endfor %}
        </ul>
      {% endif %}
    </div>

    {# Generated Sass Docs #}
    <div class="nav-subsection">
      <ul>
        {%- for slug in orderedGroups -%}
          {%- if slug|isString -%}
            {{ navitem(slug, groups[slug], activeGroup, byGroup) }}
          {%- else %}
            <li class="nav-subsection">
              <h3 class="nav-title">{{ slug.parent }}</h3>
              <ul>
                {% for subslug in slug.subgroups -%}
                  {{ navitem(subslug, groups[slug.parent][subslug], activeGroup, byGroup) }}
                {%- endfor -%}
              </ul>
            </li>
          {%- endif -%}
        {%- endfor -%}
      </ul>
    </div>

    {# External Links #}
    {% if extraLinks and extraLinks|length %}
      <div class="nav-subsection">
        <h3 class="nav-title">
          External Links
        </h3>

        <ul>
          {% for extraLink in extraLinks %}
            <li class="nav-item">
              <a href="{{ extraLink.url }}" data-nav="is-not-active">{{ extraLink.name }}</a>
            </li>
          {% endfor %}
        </ul>
      </div>
    {% endif %}

    {% if watermark %}
      <aside class="footer-credit">
        <a href="https://www.oddbird.net/herman/" class="footer-icon">
          {{ utility.icon('logo', size='footer-logo') }}
        </a>
        <span>
          Documented with
          <a href="https://www.oddbird.net/herman/" class="footer-link">
            Herman
          </a>
        </span>
        <span>
          by
          <a href="https://www.oddbird.net/" class="footer-link">
            OddBird
          </a>
        </span>
      </aside>
    {% endif %}
  </nav>
{% endmacro %}


{% macro navitem(slug, display, activeGroup, byGroup) %}
  {# Do not display if the group was defined but has no contents. #}
  {%- if byGroup[slug] -%}
    {%- set activeNav = 'is-active' if (activeGroup == slug) else 'is-not-active' %}
    <li class="nav-item">
      <a href="{{ slug }}.html" data-nav="{{ activeNav }}">{{ display }}</a>
    </li>
  {% endif -%}
{% endmacro %}