{# ========================================================================= #}
{# :: Table of contents #}
{# ========================================================================= #}
{#
  Collection of pages seperated by each styleguide. Containing a
  filter to switch between styleguides and to search for pages.
#}

{# ========================================================================= #}
{# :: Imports #}
{# ========================================================================= #}
{% import "brandplatform/components/category.njk" as category %}
{% import "brandplatform/components/subnav.njk" as subnav %}
{% import "brandplatform/components/search.njk" as search %}

{# ========================================================================= #}
{# :: Settings & variables #}
{# ========================================================================= #}
{% set data = STYLEGUIDES[BPDATA.styleguide].pages %}

{# ========================================================================= #}
{# :: Partial #}
{# ========================================================================= #}
<div class="bp-section">
  <div class="bp-container">

    <div class="bp-toc bp-js-toc">
      {# If any pages are found display the filter and render them in a list #}
      {% if data | length %}
        {% if STYLEGUIDES | length > 1 %}
          {{subnav.default("bp-toc__subnav", {
            items: STYLEGUIDES,
            type: "pages",
            activeStyleguide: BPDATA.styleguide
          })}}
        {% endif %}

        {{search.default("bp-toc__search", {
          placeholder: "Search for components",
          id: "bp-component-search"
        })}}

        <div class="bp-toc__content">
          {# If the pages are split up by folders, otherwise by files #}
          {% if data.type == "folders" %}

            {% for key, value in data.content %}
              {{category.components("bp-toc__list", {
                title: key,
                collection: value
              })}}
            {% endfor %}

          {% elseif data.type == "files" %}

            {{category.list("bp-toc__list", {
              title: "Pages",
              collection: data.content
            })}}

          {% endif %}
        </div>

      {% else %}

        <p class="bp-toc__fallback">
          Brace yourselves, pages are coming! 🥶
        </p>

      {% endif %}
    </div>

  </div>
</div>