{% extends "base.html" %}

{% block title %}
{{ page['title'] }}
{% endblock %}

{% block description %}{{ page['description'] }}{% endblock %}

{% block container %}

{% set html = page.html %}
{% if page.meta.get("toc", True) %}
	<div class="container mt-4">
		<main class="d-flex gap-5 flex-column flex-md-row-reverse">
			<nav class="flex-grow-0 flex-shrink-0 toc" style="flex-basis: 25%;">
				{% set headings = get_headings(html) %}
				<ul class="nav flex-column" role="menu">
					{% for item in headings recursive %}
						<li class="nav-item">
							<a class="nav-link" href="#{{ item.link }}">
								{{ item.text }}
							</a>
							{% if item.children %}
								<ul class="nav flex-column" role="menu">
									{{ loop(item.children) }}
								</ul>
							{% endif %}
						</li>
					{% endfor %}
				</ul>
			</nav>
			<article class="flex-grow-1 content">
				<h1 class="mb-4">{{ page['title'] }}</h1>

				{{ html | safe }}
			</article>

		</main>
	</div>
{% else %}
	<div class="container mt-4">
		<article class="content">
			<h1 class="mb-4">{{ page['title'] }}</h1>

			{{ html | safe }}
		</article>
	</div>
{% endif %}

{% endblock %}
