{# ========================================================================= #}
{# :: Default component page #}
{# ========================================================================= #}
{#
  This page is used to display a quark correctly. It is very similar to a
  component extend, but it is more lightweight and less complex.
#}

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

{# ========================================================================= #}
{# :: Imports #}
{# ========================================================================= #}
{% import "brandplatform/components/breadcrumbs.njk" as breadcrumbs %}

{# ========================================================================= #}
{# :: 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--quark">
  <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">
          {{info | md | safe}}
        </div>
      </div>
    {% endif %}

    {#
      Render the content of a quark, passed through a variable
    #}
    <div class="bp-presentation__content">
      {{content | safe}}
    </div>

  </div>
</section>

{% endblock %}