{# ========================================================================= #}
{# :: Default component page #}
{# ========================================================================= #}
{#
  This page is used to display a component correctly with all its different
  variations, usage, documentation and other information.
#}

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

{# ========================================================================= #}
{# :: Imports #}
{# ========================================================================= #}
{% import "brandplatform/components/breadcrumbs.njk" as breadcrumbs %}
{% import "brandplatform/components/tabs.njk" as tabs %}
{% 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] %}

{#
  set default values ready for the pageParams variable
#}
{% set pageParams = {
  styleVendors: [],
  scriptVendors: []
} %}

{#
  pass the vendors from the components variations to the page to load them in.
  loop over the variations, create an import of every variation and use that
  import to get the vendors from the variation. Combine them within the pageParams
  variabele through the use of the filter mergeUniq.
#}
{% for key, value in data.variations %}
  {% import value.source as v %}

  {% set pageStyleVendors = pageParams.styleVendors | mergeUniq(v.params.styleVendors) %}
  {% set pageScriptVendors = pageParams.scriptVendors | mergeUniq(v.params.scriptVendors) %}
{% endfor %}

{# ========================================================================= #}
{# :: 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">
  <div class="bp-presentation__nav bp-container">
    <header class="bp-presentation__header">
      <h1 class="bp-presentation__title">{{BPDATA.name | capitalize}}</h1>
    </header>

    {% if data.usage %}
      {{tabs.default("bp-presentation__tabs",
        [
          {
            text: "Component",
            name: "bp-component-variations",
            target: "components"
          },
          {
            text: "Docs",
            name: "bp-component-documentation",
            target: "documentation"
          }
        ]
      )}}
    {% endif %}
  </div>

  {#
    Render the info of the page, passed as markdown
  #}
  <div class="bp-presentation__intro bp-container">
    <div class="bp-container bp-container--align-left bp-container--small s-md">
      {% if info %}
        {{info | md | safe}}
      {% else %}
        <p>I find the lack of documentation ... disturbing 😏, don't you?</p>
      {% endif %}
    </div>
  </div>

  {% 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.
    Render the modifiers and states of the components, all pased as markdown
    underneath the variations if they exist.
  #}
  <div id="components" class="bp-presentation__components bp-tabs-target is-active">
    <div class="bp-presentation__components-previews">
      {% for key, value in data.variations %}
        {% import value.source as v %}

        {{preview.component("", {
          title: key,
          url: value.url,
          info: v.info,
          preview: v.preview,
          code: v.code or v.preview,
          isFullWidth: v.params.isFullWidth or false,
          isSolo: loop.length == 1,
          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>

  {#
    Render the usage of the component all passed as markdown.
  #}
  <div id="documentation" class="bp-presentation__docs bp-container bp-tabs-target">
    <div class="bp-container bp-container--align-left bp-container--small">

      {% if data.usage %}
        <article class="bp-presentation__docs-usage bp-section">
          <header class="bp-section__header">
            <h2 class="bp-section__title">Usage</h2>
          </header>

          <div class="bp-section__content s-md">
            {{data.usage | safe}}
          </div>
        </article>
      {% endif %}

    </div>
  </div>
</section>

{% endblock %}