{% extends "base.html" %}

{% block title %}{{ post.title }} | {{ site.config.title }}{% endblock %}

{% block content %}
<article class="max-w-3xl mx-auto">
    <header class="mb-10 pb-8 border-b border-gray-200 dark:border-gray-700">
        <h1 class="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4">{{ post.title }}</h1>
        <div class="flex items-center gap-3 text-gray-500 dark:text-gray-400">
            <div class="flex items-center gap-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                </svg>
                <time datetime="{{ post.date }}">{{ post.date | date(format="%B %d, %Y") }}</time>
            </div>
            {% if site.config.author %}
            <span class="text-gray-300 dark:text-gray-600">·</span>
            <div class="flex items-center gap-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                </svg>
                <span>{{ site.config.author }}</span>
            </div>
            {% endif %}
        </div>
        {% if post.tags | length > 0 %}
        <div class="flex flex-wrap gap-2 mt-4">
            {% for tag in post.tags %}
            <span class="px-3 py-1 bg-blue-50 dark:bg-blue-500/10 text-blue-600 dark:text-blue-400 rounded-full text-sm font-medium border border-blue-100 dark:border-blue-500/20">{{ tag }}</span>
            {% endfor %}
        </div>
        {% endif %}
    </header>

    <div class="prose prose-lg dark:prose-invert max-w-none
        prose-headings:text-gray-900 dark:prose-headings:text-white
        prose-p:text-gray-600 dark:prose-p:text-gray-300
        prose-li:text-gray-600 dark:prose-li:text-gray-300 prose-li:marker:text-gray-400 dark:prose-li:marker:text-gray-500
        prose-ol:text-gray-600 dark:prose-ol:text-gray-300
        prose-ul:text-gray-600 dark:prose-ul:text-gray-300
        prose-a:text-blue-500 dark:prose-a:text-blue-400 prose-a:no-underline hover:prose-a:underline
        prose-strong:text-gray-900 dark:prose-strong:text-white
        prose-code:text-pink-600 dark:prose-code:text-pink-400 prose-code:bg-gray-100 dark:prose-code:bg-gray-800 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none
        prose-pre:bg-gray-900 dark:prose-pre:bg-gray-950 prose-pre:border prose-pre:border-gray-200 dark:prose-pre:border-gray-700
        prose-blockquote:border-blue-500 prose-blockquote:text-gray-600 dark:prose-blockquote:text-gray-400
        prose-img:rounded-xl
        prose-table:text-gray-600 dark:prose-table:text-gray-300
        prose-th:bg-gray-100 dark:prose-th:bg-gray-800 prose-th:text-gray-900 dark:prose-th:text-white
        prose-td:border-gray-200 dark:prose-td:border-gray-700
        prose-hr:border-gray-200 dark:prose-hr:border-gray-700">
        {{ post.content | safe }}
    </div>

    <footer class="mt-12 pt-8 border-t border-gray-200 dark:border-gray-700">
        <a href="{{ site.config.base_url }}/" class="inline-flex items-center gap-2 text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 font-medium transition-colors">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
            </svg>
            Back to home
        </a>
    </footer>
</article>
{% endblock %}