{% extends "base.html" %}

{% block title %}{% if content.metadata.meta_title %}{{ content.metadata.meta_title }}{% else %}{{ content.title }}{%
endif %} - {{ site.title }}{% endblock %}

{% block description %}{% if content.metadata.meta_description %}{{ content.metadata.meta_description }}{% else %}{{
content.excerpt | default(value=site.description) }}{% endif %}{% endblock %}

{% block head %}
{% if content.metadata.canonical_url %}
<link rel="canonical" href="{{ content.metadata.canonical_url }}">{% endif %}
{% endblock %}

{% block content %}
<article>
    <header class="post-header">
        <h1>{{ content.title }}</h1>
        <div class="post-meta">
            {% if content.published_at %}
            <time>{{ content.published_at | format_date }}</time>
            {% endif %}
            {% if content.author %}
            <span class="separator">&middot;</span>
            <span>{{ content.author.username }}</span>
            {% endif %}
            {% if content.metadata.reading_time_minutes %}
            <span class="separator">&middot;</span>
            <span>{{ content.metadata.reading_time_minutes }} min read</span>
            {% endif %}
        </div>
        {% if content.tags | length > 0 %}
        <div class="post-tags">
            {% for tag in content.tags %}
            <a href="/tags/{{ tag.slug }}" class="tag">{{ tag.name }}</a>
            {% endfor %}
        </div>
        {% endif %}
    </header>

    <div class="content">{{ content.body_html | safe }}</div>

    {% if series_nav %}
    <nav class="series-nav" style="margin-top: 2rem; padding: 1.5rem; background: var(--bg-secondary); border-radius: var(--radius); border: 1px solid var(--border);">
        <div style="font-size: var(--font-size-sm); color: var(--text-muted); margin-bottom: 0.75rem;">
            Part {{ series_nav.current_position + 1 }} of {{ series_nav.total_items }} in
            <a href="/series/{{ series_nav.series.slug }}" style="color: var(--color-primary);">{{ series_nav.series.title }}</a>
        </div>
        <div style="display: flex; justify-content: space-between; gap: 1rem;">
            {% if series_nav.prev %}
            <a href="/posts/{{ series_nav.prev.slug }}" style="text-decoration: none;">
                <small style="color: var(--text-muted);">&larr; Previous</small><br>
                <span>{{ series_nav.prev.title }}</span>
            </a>
            {% else %}
            <span></span>
            {% endif %}
            {% if series_nav.next %}
            <a href="/posts/{{ series_nav.next.slug }}" style="text-decoration: none; text-align: right;">
                <small style="color: var(--text-muted);">Next &rarr;</small><br>
                <span>{{ series_nav.next.title }}</span>
            </a>
            {% endif %}
        </div>
    </nav>
    {% endif %}
</article>
{% endblock %}