<extend template=base.shtml>

<title id=title :title=$page.title></title>
<head id=head>
  <style>
    .til { padding: 0; }
    .til>li { display: block; margin: 2rem 0; }
    .til>li>div { line-height: 2; }
    .til>li>time, .til>li>div>a.external { color: gray; }
  </style>
</head>

<main id=main>
  <header>
  	<h1 :title=$page.title></h1>
    <em :title=$page.description></em>
    <br>
    Last updated: <time datetime="$page.date.formatHTTP()" :title='$page.date.format("January 02, 2006")'></time>
  </header>

  <div :html=$page.content()></div>

  <ol class="til">
    <li :loop=$page.subpages()>
      <time datetime="$loop.it.date.formatHTTP()" :text='$loop.it.date.format("January 02, 2006")'></time>
      <div>
        <a href="$loop.it.link()" :text="$loop.it.title"></a>
        <ctx :if="$page.custom.get?('source')">
          (<a rel="nofollow noopener" class="external" href="$if">source</a>)
        </ctx>
      </div>
    </li>
  </ol>
</main>

<footer id=footer></footer>