{# ========================================================================== #}
{# :: Imports #}
{# ========================================================================== #}
{% import "components/search.njk" as search %}
{% import "components/button.njk" as button %}
{% import "components/toc.njk" as toc %}
{% import "components/logo.njk" as logo %}
{% import "components/drag.njk" as drag %}

{# ========================================================================== #}
{# :: Default #}
{# ========================================================================== #}
{% macro default(classes, data) %}

	<aside class="bp-c-aside bp-js-aside {{classes}}">
		<div class="bp-c-aside__backdrop u-hide@above-viewport-9">
			<div class="bp-c-aside__drag">
				{{drag.default("bp-c-aside__drag-icon")}}

				<p class="bp-c-aside__active">{{data.active.item | capitalize}} {% if active.sub %}- {{data.active.sub | capitalize}}{% endif %}</p>
			</div>
		</div>

		<div class="bp-c-aside__wrapper">
			{{logo.default("bp-c-aside__logo u-hide@below-viewport-9")}}

			{% if data.search %}
				<div class="bp-c-aside__search">
					{{search.default("bp-c-search--white", data.search)}}
				</div>
			{% endif %}

			<div class="bp-c-aside__container">
				{% if data.toc %}
					{{toc.default("bp-c-aside__toc", {
						active: data.active,
						items: data.toc
					})}}
				{% endif %}

				{% if data.meta %}
					<ul class="bp-c-aside__meta">
						{% for item in data.meta %}

							<li class="bp-c-aside__item {{'is-active' if item.slug === data.active.item}}">
								<a class="bp-c-aside__link" href="{{item.url}}">{{item.title | capitalize}}</a>
							</li>

						{% endfor %}
					</ul>
				{% endif %}

				{% if data.button %}
					<div class="bp-c-aside__button">
						{{button.link("bp-c-button--outline", data.button)}}
					</div>
				{% endif %}
			</div>
		</div>
	</aside>

{% endmacro %}