{# ========================================================================== #}
{# :: Component #}
{# ========================================================================== #}
{#
	The visual representation of a components content with its variations and
	information to better explain its behaviour, modifiers, states, ...
#}

{# ========================================================================== #}
{# :: Imports #}
{# ========================================================================== #}
{% import "components/fallback.njk" as fallback %}
{% import "components/preview.njk" as preview %}
{% import "components/index-list.njk" as indexList %}
{% import "components/classes.njk" as classes %}

{# ========================================================================== #}
{# :: Settings & variables #}
{# ========================================================================== #}
{% set HASROUTEDATA = ROUTEDATA.TYPE and ROUTEDATA.TOPIC %}

{% if HASROUTEDATA %}
	{% import ROUTEDATA.TYPE + "/" + ROUTEDATA.TOPIC + "/" + ROUTEDATA.TOPIC + "-page.njk" as page %}

	{% set INFO = page.info %}
	{% set MODIFIERS = page.modifiers %}
	{% set STATES = page.states %}
	{% set JAVASCRIPT = page.javascript %}
	{% set USAGE = ROUTEDATA.DETAIL.usage %}
	{% set HASDOCS = MODIFIERS | length or STATES | length or JAVASCRIPT | length %}
	{% set HASUSAGE = USAGE | length %}
{% endif %}

{# ========================================================================== #}
{# :: Partial #}
{# ========================================================================== #}
{% if HASROUTEDATA %}

	<section class="bp-l-component">
		<div class="bp-l-component__info">
			<header class="bp-l-component__header">
				<h1 class="bp-l-component__title">{{ROUTEDATA.TOPIC | capitalize | replace("-", " ")}}</h1>
			</header>

			<div class="bp-l-component__intro {{'bp-s-markdown-default' if INFO}}">
				{% if INFO %}
					{{INFO | md | safe}}
				{% else %}
					{{fallback.default("", {
						text: "I find the lack of documentation... disturbing 😏, don't you?"
					})}}
				{% endif %}
			</div>

			{% if HASDOCS or HASUSAGE %}
				<div class="bp-l-component__toc">
					{{indexList.default("", {
						items: [
							{
								text: "Modifiers" if MODIFIERS else "",
								id: "modifiers",
								slug: "modifiers"
							},
							{
								text: "States" if STATES else "",
								id: "states",
								slug: "states"
							},
							{
								text: "JavaScript" if JAVASCRIPT else "",
								id: "javascript",
								slug: "javascript"
							},
							{
								text: "Usage" if USAGE else "",
								id: "usage",
								slug: "usage"
							}
						]
					})}}
				</div>
			{% endif %}
		</div>

		{% if ROUTEDATA.DETAIL.variations | length > 0 %}
			<div class="bp-l-component__variations">
				{% for key, value in ROUTEDATA.DETAIL.variations %}
					{% import value.source as v %}

					{{preview.component("", {
						title: key,
						url: value.url,
						info: v.info,
						preview: v.preview,
						code: v.code or v.preview,
						isFullWidth: v.params.isFullWidth or false,
						scope: v.params.scope,
						order: v.params.order
					})}}
				{% endfor %}
			</div>
		{% endif %}

		{% if HASDOCS %}
			<div class="bp-l-component__docs">
				<h2 class="bp-l-component__sub-title">Documentation</h2>

				{% if MODIFIERS %}
					{{classes.default("", {
						id: "modifiers",
						title: "Modifiers",
						content: MODIFIERS
					})}}
				{% endif %}

				{% if STATES %}
					{{classes.default("", {
						id: "states",
						title: "States",
						content: STATES
					})}}
				{% endif %}

				{% if JAVASCRIPT %}
					{{classes.default("", {
						id: "javascript",
						title: "JavaScript",
						content: JAVASCRIPT
					})}}
				{% endif %}
			</div>
		{% endif %}

		{% if HASUSAGE %}
			<article id="usage" class="bp-l-component__usage">
				<h2 class="bp-l-component__sub-title">Usage</h2>

				<div class="bp-s-markdown-default">
					{{USAGE | md | safe}}
				</div>
			</article>
		{% endif %}
	</section>

{% else %}
	{{fallback.default("", {
		text:
			"Looks like this is the start of something new! But wait for it,
			nothing has been defined yet, so keep your fingers crossed and lets
			see what happens! 🤞🤞"
	})}}
{% endif %}