{{ define "main" }}
<main class="list">
	<div class="container">
		<header class="list-header">
			<h1 class="list-title">{{ .Title }}</h1>
		</header>
		<section class="content">
			{{ .Content }}
		</section>
		<section class="pages-in-list">
			<h2>Pages in this section</h2>
			<ul class="pages">
				{{ range .Pages }}
				<li class="page">
					<article>
						<a class="headline" href="{{.Permalink}}">
							<h1 class="page-title">{{ .Title }}</h1>
							<time class="page-date" datetime='{{ .Date.Format "2006-01-02" }}'>{{ .Date.Format "2006-01-02" }}</time>
						</a>
						<p class="page-summary">{{ .Summary }}</p>
					</article>
				</li>
				{{ end }}
			</ul>
		</section>
	</div>
</main>
<style>
	.pages {
		list-style: none;
		padding: 0;
		display: flex;
		flex-flow: column;
		gap: 1em;
	}
	.list-title {
		
	}
	.headline {
		display: flex;
		flex-flow: row-reverse wrap;
		align-items: center;
		justify-content: start;
		gap: 0.5em;
	}
	.page-title {
		margin: 0;
	}
	.page-summary {
		margin: 0;
	}
</style>
{{ end }}