{# ========================================================================== #}
{# :: 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) %}
	{% set active = { item: data.active.item or "", sub: data.active.sub or "" } %}

	<aside class="bp-c-aside bp-js-aside {% if(data.toc.length === 0) %} bp-c-aside--without-toc {% endif %} {{classes}}">
		{{drag.default("bp-c-aside__drag u-hide@above-viewport-9")}}

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

			{% if data.search and data.toc and data.toc | length > 0 %}
				<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.length > 0 %}
					{{toc.default("bp-c-aside__toc", {
						active: active,
						items: data.toc
					})}}
				{% endif %}

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

							<li class="bp-c-aside__item {{'is-active' if item.slug === 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 %}