{# ========================================================================= #}
{# :: Table of contents #}
{# ========================================================================= #}
{#
  Collection of components seperated by utils, layout, quarks, atoms, molecules
  and organisms. Containing a filter to switch between styleguides and to search
  for these components within the multiple categories.
#}

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

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

    <div
      class="bp-toc bp-js-toc"
    >
      {% if STYLEGUIDES | length > 1 %}
        {{subnav.default("bp-toc__subnav", {
          items: STYLEGUIDES,
          type: "styleguide",
          activeStyleguide: BPDATA.styleguide
        })}}
      {% endif %}

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

      <div class="bp-toc__content">

        {# Render the atoms #}
        {% if STYLEGUIDES[BPDATA.styleguide].atoms | length %}
          {{category.components("bp-toc__list", {
            title: "Atoms",
            text: "The smallest type of a stand-alone component, the basis of the styleguide.",
            collection: STYLEGUIDES[BPDATA.styleguide].atoms.components,
            searchId: "bp-component"
          })}}
        {% endif %}

        {# Render the molecules #}
        {% if STYLEGUIDES[BPDATA.styleguide].molecules.components | length %}
          {{category.components("bp-toc__list", {
            title: "Molecules",
            text: "Repeatable stand-alone components used within a certain context.",
            collection: STYLEGUIDES[BPDATA.styleguide].molecules.components,
            searchId: "bp-component"
          })}}
        {% endif %}

        {# Render the organisms #}
        {% if STYLEGUIDES[BPDATA.styleguide].organisms.components | length %}
          {{category.components("bp-toc__list", {
            title: "Organisms",
            text: "Largest type of a contextual component. Mainly unique on a page.",
            collection: STYLEGUIDES[BPDATA.styleguide].organisms.components,
            searchId: "bp-component"
          })}}
        {% endif %}

        {# Render the layouts #}
        {% if STYLEGUIDES[BPDATA.styleguide].layouts.components | length %}
          {{category.components("bp-toc__list", {
            title: "Layouts",
            text: "Non-contextual component used to create the structure or layout.",
            collection: STYLEGUIDES[BPDATA.styleguide].layouts.components,
            searchId: "bp-component"
          })}}
        {% endif %}

        {# Render the quarks #}
        {% if STYLEGUIDES[BPDATA.styleguide].quarks.components | length %}
          {{category.components("bp-toc__list", {
            title: "Quarks",
            text: "Intangible components used to define the base branding.",
            collection: STYLEGUIDES[BPDATA.styleguide].quarks.components,
            searchId: "bp-component"
          })}}
        {% endif %}

        {# Fallback rendered when there is no search result #}
        <div class="bp-toc__search-fallback">
          <p class="bp-toc__search-fallback-text">
            These are not the components you are looking for. 😉
          </p>
        </div>
      </div>
    </div>

  </div>
</div>