{% extends "base.html" %}

{% block title %}{{ post.title }}{% endblock %}

{% block content %}
<article class="py-16">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Post Header -->
        <header class="mb-12">
            <div class="flex items-center text-sm text-gray-500 mb-4">
                <a href="{{ url_for('blog_index') }}" class="hover:text-primary-600">&larr; Back to Blog</a>
            </div>
            <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">{{ post.title }}</h1>
            <div class="flex items-center text-gray-600">
                <div class="w-10 h-10 bg-primary-100 rounded-full flex items-center justify-center text-primary-600 font-semibold mr-3">
                    {{ post.author.username[0].upper() }}
                </div>
                <div>
                    <div class="font-medium text-gray-900">{{ post.author.username }}</div>
                    <div class="text-sm">{{ post.created_at.strftime('%B %d, %Y') }}</div>
                </div>
            </div>
        </header>

        <!-- Post Content -->
        <div class="prose prose-lg max-w-none">
            {{ post.content | safe }}
        </div>

        <!-- Post Footer -->
        <footer class="mt-12 pt-8 border-t border-gray-200">
            <div class="flex justify-between items-center">
                <div>
                    {% if post.updated_at and post.updated_at != post.created_at %}
                    <p class="text-sm text-gray-500">
                        Last updated: {{ post.updated_at.strftime('%B %d, %Y') }}
                    </p>
                    {% endif %}
                </div>
                <a href="{{ url_for('blog_index') }}" class="btn btn-secondary">
                    &larr; Back to Blog
                </a>
            </div>
        </footer>
    </div>
</article>
{% endblock %}