{# ========================================================================== #}
{# :: Sandbox page #}
{# ========================================================================== #}
{#
	Page used to display a component seperate from all the styling from the
	brandplatform.
#}

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

{# ========================================================================== #}
{# :: Imports #}
{# ========================================================================== #}
{% if ROUTEDATA.VARIATION %}
	{% import ROUTEDATA.VARIATION.source as component %}
{% endif %}

{# ========================================================================== #}
{# :: Settings & variables #}
{# ========================================================================== #}
{% set ISPREVIEW = ROUTEDATA.ISPREVIEW %}

{% set pageParams = {
	id: "library-sandbox",
	bodyClass: "",
	styleVendors: ROUTEDATA.VARIATION.styleVendors or [],
	scriptVendors: ROUTEDATA.VARIATION.scriptVendors or [],
	loadProjectCSS: true,
	loadProjectJS: true,
	loadCoreCSS: false,
	loadCoreJS: false,
	loadOverwriteCSS: ISPREVIEW
} %}

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

	{% set scope = component.params.scope or "" %}

	{% if ISPREVIEW %}

		{% if scope %}

			{% if component %}
				<div class="{{component.params.scope}}">
					{{component.preview | safe}}
				</div>
			{% endif %}

		{% else %}

			{% if component %}
				{{component.preview | safe}}
			{% endif %}

		{% endif %}

	{% else %}

		{% if component %}
			{{component.preview | safe}}
		{% endif %}

	{% endif %}

{% endblock %}