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

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

	<article
		style="order: {{data.order or 1}}"
		class="bp-c-preview bp-js-preview {{'bp-c-preview--full-width' if data.isFullWidth}} {{classes}}"
	>
		<div class="bp-c-preview__info">
			<h2 class="bp-c-preview__title">
				{{data.title | capitalize | replace("-", " ")}}
			</h2>

			{% if data.info %}
				<div class="bp-c-preview__text bp-s-markdown-default">
					{{data.info | md | safe}}
				</div>
			{% endif %}
		</div>

		<div class="bp-c-preview__content">
			<div class="bp-c-preview__actions">
				<button class="bp-c-preview__toggle">
					{{icon.default("", { name: "code"})}}
				</button>
				<a class="bp-c-preview__sandbox" target="_blank" href="{{data.url}}">
					{{icon.default("", { name: "fullscreen"})}}
				</a>
			</div>

			<div class="bp-c-preview__visual">
				<div class="bp-c-preview__container {{data.scope}}">
					{{data.preview | safe}}
				</div>
			</div>

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

{% endmacro %}