{% extends "base.html" %}

{% block og_type %}article{% endblock og_type %}

{% block article_meta %}
    <meta property="article:published_time" content="{{ created }}">
    {% if updated %}<meta property="article:modified_time" content="{{ updated }}">{% endif %}
    {% if author %}<meta property="article:author" content="{{ author.name }}">{% endif %}
    {% for tag in tags %}<meta property="article:tag" content="{{ tag.name }}">{% endfor %}
{% endblock article_meta %}

{% 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 %}
            <span class="reading-time">· {{ reading_time_minutes }} min read</span>
            {% if author %}
            <span class="author">
                {% if author.link %}<a href="{{ author.link }}" 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.link %}</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 %}