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

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

	<ul class="bp-c-toc {{classes}}">
		{% for item in data.items %}

			<li class="bp-c-toc__item {{'is-active is-open' if data.active.item === item.slug}} {{'bp-c-toc__item--with-sub' if item.children | length > 0}}">
				{% if item.children | length > 0 %}
					<div class="bp-c-toc__header">
						<a class="bp-c-toc__link" href="{{item.url}}">{{item.title | capitalize | replace("-", " ")}}</a>

						<button class="bp-c-toc__toggle">
							{{icon.default("", { name: "chevron-down" })}}
						</button>
					</div>
				{% else %}
					<a class="bp-c-toc__link" href="{{item.url}}">{{item.title | capitalize | replace("-", " ")}}</a>
				{% endif %}

				{% if item.children | length > 0 %}
					<ul class="bp-c-toc__sub">
						{% for subItem in item.children %}

							<li class="bp-c-toc__sub-item {{'is-active' if data.active.sub === subItem.slug}}">
								<a class="bp-c-toc__sub-link" href="{{subItem.url}}">{{subItem.title | capitalize | replace("-", " ")}}</a>
							</li>

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

		{% endfor %}
	</ul>

{% endmacro %}