{# ========================================================================== #}
{# :: 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 item.active}}">
				<div class="bp-c-toc__header">
					<a class="bp-c-toc__link {{'bp-c-toc__link--locked' if item.locked}}" href="{{item.url}}">
						<span class="bp-c-toc__link-text">
							{{item.title | capitalize | replace("-", " ")}}
						</span>

						{% if item.locked %}
							{{icon.default("bp-c-toc__locked", { name: "lock" })}}
						{% endif %}
					</a>

					{% if item.children | length > 0 %}
						<button class="bp-c-toc__toggle">
							{{icon.default("bp-c-toc__toggle-icon", { name: "chevron-down" })}}
						</button>
					{% endif %}
				</div>

				{% 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 subItem.active}}">
								<a class="bp-c-toc__sub-link {{'bp-c-toc__sub-link--locked' if subItem.locked}}" href="{{subItem.url}}">
									<span class="bp-c-toc__sub-link-text">
										{{subItem.title | capitalize | replace("-", " ")}}
									</span>

									{% if subItem.locked %}
										{{icon.default("bp-c-toc__locked", { name: "lock" })}}
									{% endif %}
								</a>
							</li>

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

		{% endfor %}
	</ul>

{% endmacro %}