{% extends "base.html" %}
{% import "_icons.html" as icon %}

{% block title %}{{ post.title }} - {{ site.name }}{% endblock %}
{% block description %}{{ post.summary or blog.description }}{% endblock %}
{% block og_type %}article{% endblock %}

{% block content %}
    <div class="page-container page-container--top">
        <aside class="page-sidebar">
            <h2 class="page-title">{{ blog.title }}</h2>
            <div class="sidebar-posts">
                {% for other in posts %}
                <a href="{{ base }}{{ other.url }}"{% if other.slug == post.slug %} class="active"{% endif %}>
                    <span class="sidebar-post-date">{{ other.date | long_date }}</span>
                    {{ other.title }}
                </a>
                {% endfor %}
            </div>
            <a href="{{ base }}blog.html" class="btn btn-secondary">All posts</a>
        </aside>

        <main class="page-content">
            <article>
                <header class="post-header">
                    <h1>{{ post.title }}</h1>
                    <div class="post-meta">
                        <time datetime="{{ post.date | iso_date }}">{{ post.date | long_date }}</time>
                        <span class="dot"></span>
                        <span>{{ post.author }}</span>
                        {% for tag in post.tags %}
                        <span class="post-tag">{{ tag }}</span>
                        {% endfor %}
                    </div>
                    {% if post.summary %}
                    <p class="post-lead">{{ post.summary }}</p>
                    {% endif %}
                </header>

                {{ post.html }}
            </article>

            <nav class="post-nav">
                {% if older %}
                <a href="{{ base }}{{ older.url }}">{{ icon.arrow_left(14) }} {{ older.title }}</a>
                {% else %}
                <span class="spacer"></span>
                {% endif %}
                {% if newer %}
                <a href="{{ base }}{{ newer.url }}">{{ newer.title }} {{ icon.arrow_right(14) }}</a>
                {% endif %}
            </nav>
        </main>
    </div>
{% endblock %}