{# ========================================================================== #}
{# :: Index #}
{# ========================================================================== #}
{#
	Blocks of content that each represents a section within the manual. Each
	section contains a title and a lot of markdown that is passed from the
	server and rendered using the markdown filter.
#}

{# ========================================================================== #}
{# :: Imports #}
{# ========================================================================== #}
{% import "components/index-list.njk" as indexList %}

{# ========================================================================== #}
{# :: Partial #}
{# ========================================================================== #}
<section class="bp-l-section">
	<header class="bp-l-section__header">
		<h1 class="bp-l-section__title u-h1">{{ROUTEDATA.SECTION | capitalize | replace("-", " ")}}</h1>
	</header>

	<div class="bp-l-section__index-list">
		{{indexList.default("", {
			active: ROUTEDATA.SECTION,
			items: ROUTEDATA.INDEXES
		})}}
	</div>

	<div class="bp-l-section__content bp-s-markdown-default">
		{{ROUTEDATA.MANUAL.content | md | safe}}
	</div>
</section>