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

{# ========================================================================= #}
{# :: Component #}
{# ========================================================================= #}
{% macro component(classes, data) %}

<article class="bp-preview bp-js-preview {{'bp-preview--full-width' if data.isFullWidth}} {{'bp-preview--solo' if data.isSolo}} {{classes}}">
  <div class="bp-preview__info bp-container">
    <div class="bp-preview__nav">
      <header class="bp-preview__header">
        <h2 class="bp-preview__title">{{data.title | capitalize | replace("-", " ")}}</h2>
      </header>

      <div class="bp-preview__actions">
        {{switch.default("bp-preview__action", { icon: "bp-icon-code"})}}

        <a
          class="bp-preview__action bp-icon-fullscreen"
          target="_blank"
          href="{{data.url}}"
          aria-label="Open preview in nieuw venster"
        ></a>
      </div>
    </div>

    {% if data.info %}
      <div class="bp-preview__text">
        <div class="bp-container bp-container--align-left bp-container--small s-md">
          {{data.info | md | safe}}
        </div>
      </div>
    {% endif %}
  </div>

  <div class="bp-preview__component bp-container">
    <div class="bp-preview__content {{data.scope}}">
      {{data.preview | safe}}
    </div>

    <div class="bp-preview__code">
      {% if data.code %}
        {{code.sample(data.code) | safe}}
      {% else %}
        {{code.sample(data.preview) | safe}}
      {% endif %}
    </div>
  </div>
</article>

{% endmacro %}

{# ========================================================================= #}
{# :: Layout #}
{# ========================================================================= #}
{% macro layout(classes, data) %}

<article class="bp-section {{classes}}">
  <header class="bp-section__header">
    <h2 class="bp-section__title">
      {{data.title | capitalize | replace("-", " ")}}
    </h2>
  </header>

  {% if data.info %}
    <div class="bp-section__intro">
      <div class="bp-container bp-container--align-left bp-container--small s-md">
        {{data.info | md | safe}}
      </div>
    </div>
  {% endif %}

  {% if data.preview %}
    <div class="bp-section__content {{data.scope}}">
      {{data.preview | safe}}
    </div>
  {% endif %}
</article>

{% endmacro %}