{{ define "main" }}
	<style>
		@media (min-width: 768px) {
			.sidenav {
				width: 240px;
			}
		}
	</style>
<div class="row">
	<nav class="navbar-expand-md bg-light sidenav border-end">
		<div class="container">
			<div class="collapse navbar-collapse" id="navbarSupportedContent">
				<nav class="navbar navbar-expand-md bg-light sidenav col" style="margin-top: -20px;">
					<ul class="navbar-nav me-auto mb-2 mb-lg-0 flex-column col mt-4">
						{{ $currentPage := . }}
						{{ range .Site.Menus.docs.ByWeight.Reverse }}
							<li class="nav-item">
								<a href="{{ .URL }}" class="nav-link">
									<strong>{{ .Title }}</strong>
								</a>
							</li>
							{{ if .Children }}
								<ul style="list-style: none;">
									{{ range .Children }}
										<li class="nav-item">
											<a href="{{ .URL }}" class="nav-link">
												{{ .Title }}
											</a>
										</li>
									{{ end }}
								</ul>
							{{ end }}
						{{ end }}
					</ul>
				</nav>
			</div>
		</div>
	</nav>

	<container class="col mt-2" style="padding-left: 20px; padding-right: 20px;">
		<div>
			<h1>{{ .Title }}</h1>
			<p><em>
			{{ $date := .Date.UTC.Format "Jan 2, 2006" }}
			{{ $lastmod := .Lastmod.UTC.Format "Jan 2, 2006" }}
			{{ if and (ne $lastmod $date) (gt .Lastmod .Date) }}
				Last updated {{ $lastmod }}<br>
			{{ end }}

			{{ if .Description }}
				{{ .Description }}<br>
			{{ end}}
			</em></p>
			{{.Content}}
		</div>

		<div class="footer mt-auto">
			<p class="card-small text-muted">
				Want to help improve this page? <a href="https://github.com/Rosettea/Hilbish/issues/new/choose">Create an issue.</a>
			</p>
		</div>
	</container>
</div>
{{ end }}