{% extends "base.html" %}

{% block content %}
<article class="blog-post">
    <header>
        <h1>{{ title }}</h1>
        <div class="post-meta">
            {% if created %}<time>{{ created }}</time>{% endif %}
            {% if author %}<span class="author">by {{ author }}</span>{% endif %}
        </div>
        {% 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>
</article>
{% endblock content %}