{% extends "base.html" %}

{% block content %}
<article class="blog-post">
    <header>
        <h1>{{ title }}</h1>
        <div class="post-meta">
            {% if created %}<time>{{ created }}</time>{% endif %}
            {% if updated %}<time>(updated {{ updated }})</time>{% endif %}
            {% if author %}
            <span class="author">
                {% if author.email %}<a href="mailto:{{ author.email }}" class="author-link">{% endif %}
                {% if author.image %}
                <img src="{{ author.image }}" alt="{{ author.name }}" class="author-avatar">
                {% else %}
                <svg class="author-avatar" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><circle cx="16" cy="16" r="16" fill="#e0e0e0"/><circle cx="16" cy="12" r="5" fill="#9e9e9e"/><path d="M6 28c0-5.5 4.5-10 10-10s10 4.5 10 10" fill="#9e9e9e"/></svg>
                {% endif %}
                {{ author.name }}
                {% if author.email %}</a>{% endif %}
            </span>
            {% endif %}
        </div>
        {% if description %}<p class="post-description">{{ description }}</p>{% endif %}
        {% if tags | length > 0 %}
        <ul class="tag-list">
            {% for tag in tags %}
            <li><a href="/tags/{{ tag.slug }}/">{{ tag.name }}</a></li>
            {% endfor %}
        </ul>
        {% endif %}
    </header>

    {% if image %}
    <img src="{{ image }}" alt="" class="post-hero">
    {% endif %}

    <div class="post-layout">
        {% if toc | length > 0 %}
        <aside class="toc">
            <h2>Contents</h2>
            <ul>
                {% for entry in toc %}
                <li class="toc-h{{ entry.level }}"><a href="#{{ entry.id }}">{{ entry.text }}</a></li>
                {% endfor %}
            </ul>
        </aside>
        {% endif %}

        <div class="post-body">
            {{ content | safe }}
        </div>
    </div>

    {% if newer_post or older_post %}
    <nav class="post-nav" aria-label="Adjacent posts">
        {% if newer_post %}
        <a class="post-nav-newer" rel="prev" href="{{ newer_post.url | safe }}">
            <span class="post-nav-label">&larr; Newer</span>
            <span class="post-nav-title">{{ newer_post.title }}</span>
            {% if newer_post.created %}<time>{{ newer_post.created }}</time>{% endif %}
        </a>
        {% endif %}
        {% if older_post %}
        <a class="post-nav-older" rel="next" href="{{ older_post.url | safe }}">
            <span class="post-nav-label">Older &rarr;</span>
            <span class="post-nav-title">{{ older_post.title }}</span>
            {% if older_post.created %}<time>{{ older_post.created }}</time>{% endif %}
        </a>
        {% endif %}
    </nav>
    {% endif %}
</article>
{% endblock content %}