{# ========================================================================= #}
{# :: Manual index #}
{# ========================================================================= #}
{#
  This section contains the entire manuals information about how to get started
  with the styleguide, best practices, principles, ... . The manuals sections
  are markdown files that are contained within templates/manual/[file-name].md.
  These are read by the server, its content get converted and in this file,
  the object is looped and every section is rendered.
#}

{# ========================================================================= #}
{# :: Imports #}
{# ========================================================================= #}
{% import "brandplatform/components/index-list.njk" as indexList %}

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

    <div class="bp-container bp-container--tiny bp-container--align-left">
      <header class="bp-section__header">
        <h1 class="bp-section__title">User Manual</h1>
      </header>

      <p class="bp-section__intro">
        Get started on how to use and implement the brandplatform in your
        system. Read on about what principles are used to create the styling
        of the components and pages.
      </p>
    </div>

    <div class="bp-manual">
      {# Render the index list based on the markdown files #}
      {{indexList.default("bp-manual__index", {
        items: MANUAL
      })}}

      {#
        Loop through every file in the manual folder and render an article
        with a scope of manual defined to style the tags generated by
        markdown.
      #}
      {% for key, value in MANUAL %}

        <article id="{{value.name}}" class="bp-section bp-manual__article">
          <div class="bp-container bp-container--align-left bp-container--medium">
            <header class="bp-section__header ">
              <h2 class="bp-section__title">{{key | capitalize}}</h2>
            </header>

            <div class="bp-section__content s-md">
              {{value.content | md | safe}}
            </div>
          </div>
        </article>

      {% endfor %}
    </div>

  </div>
</section>