{# ========================================================================= #}
{# :: Default layout page #}
{# ========================================================================= #}
{#
  This page is used to display a layout correctly with all its different
  variations.
#}

{# ========================================================================= #}
{# :: Inheritance #}
{# ========================================================================= #}
{% extends "brandplatform/base/extends/page/base.njk" %}

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

{# ========================================================================= #}
{# :: Settings & variables #}
{# ========================================================================= #}
{#
  retrieve the component data from the object passed by the server
#}
{% set data = STYLEGUIDES[BPDATA.styleguide][BPDATA.type].components[BPDATA.name] %}

{# ========================================================================= #}
{# :: Template #}
{# ========================================================================= #}
{% block content %}

<div class="bp-container">
  {{breadcrumbs.default("",
    {
      items: [
        {
          text: BPDATA.styleguide,
          url: "/styleguide/" + BPDATA.styleguide
        },
        {
          text: BPDATA.name,
          url: "/" + BPDATA.styleguide + "/" + BPDATA.type + "/" + BPDATA.name
        }
      ]
    }
  )}}
</div>

<section class="bp-presentation bp-presentation--layout">
  <div class="bp-container">

    <header class="bp-presentation__header">
      <h1 class="bp-presentation__title">{{BPDATA.name | capitalize}}</h1>
    </header>

    {#
      Render the info of the page, passed as markdown
    #}
    {% if info %}
      <div class="bp-presentation__intro">
        <div class="bp-container bp-container--align-left bp-container--small s-md">
          {{info | md | safe}}
        </div>
      </div>
    {% endif %}


  {% if modifiers or states or javascript %}
    <div class="bp-presentation__index bp-container">
      {{indexList.default("", {
        items: {
          "modifiers": "modifiers" if modifiers else "",
          "states": "states" if states else "",
          "javascript": "javascript" if javascript else ""
        }
      })}}
    </div>
  {% endif %}


    {#
      Render the variations of the component by looping over them, importing the
      Nunjucks file and passing the variables defined to the perview component.
    #}
    <div class="bp-presentation__components">
      {% for key, value in data.variations %}
        {% import value.source as v %}

        {{preview.layout("", {
          title: key,
          info: v.info,
          preview: v.preview,
          scope: v.params.scope
        })}}
      {% endfor %}
    </div>

     {% if modifiers or states or javascript %}
      <div class="bp-presentation__components-docs bp-container">
        <div class="bp-container--small bp-container--align-left">
          {% if modifiers %}
            <article id="modifiers" class="bp-presentation__components-modifiers bp-section">
              <header class="bp-section__header">
                <h2 class="bp-section__title">Modifiers</h2>
              </header>

              <div class="bp-section__content s-md s-md-dl">
                {{modifiers | md | safe}}
              </div>
            </article>
          {% endif %}

          {% if states %}
            <article id="states" class="bp-presentation__components-states bp-section">
              <header class="bp-section__header">
                <h2 class="bp-section__title">States</h2>
              </header>

              <div class="bp-section__content s-md s-md-dl">
                {{states | md | safe}}
              </div>
            </article>
          {% endif %}

          {% if javascript %}
            <article id="javascript" class="bp-presentation__components-states bp-section">
              <header class="bp-section__header">
                <h2 class="bp-section__title">JavaScript</h2>
              </header>

              <div class="bp-section__content s-md s-md-dl">
                {{javascript | md | safe}}
              </div>
            </article>
          {% endif %}
        </div>
      </div>
    {% endif %}
  </div>


  </div>
</section>

{% endblock %}