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

{# ========================================================================== #}
{# :: Component #}
{# ========================================================================== #}
{% macro component(classes, data) %}
	{% if CONFIG.environment.core === "production" and CONFIG.environment.node === "local" %}
		{% set homepage = "http://localhost:" + CONFIG.server.localhost %}
	{% elseif CONFIG.environment.core === "production" and CONFIG.environment.node === "production" %}
		{% set homepage = CONFIG.app.homepage %}
	{% else %}
		{% set homepage = "http://localhost:" + CONFIG.server.localhost %}
	{% endif %}

	<article
		style="order: {{data.order or 1}}"
		class="bp-c-preview bp-js-preview {{'bp-c-preview--full-width' if data.isFullWidth}} {{classes}} is-loading"
	>
		<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__controls">
				<div class="bp-c-preview__viewport">
					<input class="bp-c-preview__viewport-input" type="number" placeholder="width" />

					<span class="bp-c-preview__viewport-suffix">px</span>
				</div>

				<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>

			<div class="bp-c-preview__visual">
				<div class="bp-c-preview__container">
					<div class="bp-c-preview__iframe-wrapper">
						<iframe class="bp-c-preview__iframe" src="{{homepage}}{{data.url}}/preview"></iframe>

						<div class="bp-c-preview__iframe-offset"></div>
					</div>

					<button class="bp-c-preview__resize"></button>
				</div>
			</div>

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

			{{loader.default("bp-c-preview__loader")}}
		</div>
	</article>

{% endmacro %}