---
layout: base.njk
---

{% include "components/docs-aside.njk" %}
<section class="md:w-3/4 overflow-hidden">
	<article class="flex flex-row flex-wrap">
	{# TODO: implement table of content
		<aside class="order-2 mt-4">
			<nav aria-labelledby="table-of-content">
				<h3 class="uppercase font-semibold text-gray-600 text-sm" id="table-of-content">On this page</h3>
				<ol></ol>
			</nav>
		</aside>
	#}
		<div class="order-1 max-w-full flex-grow">
		<h1 class="text-2xl md:text-4xl font-bold mb-6 md:mb-8 text-brand-900 dark:text-brand-100">{{ title }}</h1>
			<div class="prose dark:prose-dark max-w-full">{{ layoutContent | safe }}</div>
		</div>
		<footer class="order-3 min-w-full flex mt-4 justify-end mr-1 text-sm text-gray-500 dark:text-gray-300 space-x-3 leading-5">
			<span>
				Updated <time datetime="{{ page.date | robotizeDate }}">{{ page.date | humanizeDate }}</time>
			</span>
			<a class="border-b border-transparent transition-colors hover:border-current" target="_blank" rel="noopener noreferrer" href="{{ site.githubUrl }}/edit/{{ site.githubBranch }}/site/{{ page.inputPath }}">Edit</a>
		</footer>
	</article>
	{# TODO: implement navigation to next page of the docs
		<nav class="flex justify-between mt-10 mb-8 p-2 border-t dark:border-gray-700 text-gray-800 dark:text-gray-200">
		<a>Prev page</a>
		<a>Next page</a>
	</nav> #}
</section>
