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

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

	<div class="bp-c-languages bp-js-languages {{classes}}">
		<button class="bp-c-language__button u-hide@below-viewport-9">
			<span class="bp-c-language__active">{{data.active}}</span>

			{{icon.default("bp-c-language__icon", { name: "chevron-down" })}}
		</button>

		{% if data.items | length > 0 %}
			<div class="bp-c-languages__items">
				<ul class="bp-c-languages__list">
					{% for item in data.items %}
						{% set path = item.url or "/" + item.language + data.staticPath %}

						<li class="bp-c-languages__item {{'u-hide@above-viewport-9 is-active@below-viewport-9' if data.active == item.language}}">
							<a class="bp-c-languages__link" href="{{path}}">{{item.language}}</a>
						</li>

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

{% endmacro %}