{% extends "base.html" %}

{% block title %}
<title>{{ page.title }} | cleberg.net</title>
{% endblock %}

{% block css %}
<link rel="stylesheet" href="/syntax-theme-dark.css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="/syntax-theme-light.css" media="(prefers-color-scheme: light)">
<link rel="stylesheet" href="/styles.css">
{% endblock css %}

{% block content %}
<section class="post-metadata">
    <h1>{{ page.title }}</h1>
    {% if page.date %}
    <p><time datetime="{{ page.date | date(format='%Y-%m-%d %H:%M:%S') }}">{{ page.date }}</time></p>
    {% endif %}
    {% if page.updated %}
    <p>Last Updated: <time datetime="{{ page.updated | date(format='%Y-%m-%d %H:%M:%S') }}">{{ page.updated }}</time></p>
    {% endif %}
    <p>{{ page.word_count }} words; {{ page.reading_time }} minute(s)</p>
{% if page.toc %}
    <details open>
        <summary>Table of Contents</summary>
        <nav class="page-nav" aria-label="page-nav" role="navigation">
            <ul>
            {% for h1 in page.toc %}
                <li>
                    <a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
                    {% if h1.children %}
                        <ul>
                            {% for h2 in h1.children %}
                                <li>
                                    <a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </li>
            {% endfor %}
            </ul>
        </nav>
    </details>
{% endif %}
</section>

<article role="article">
{{ page.content | safe }}
</article>
{% endblock content %}