{% 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">&middot;</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 %}
            {% if post.reading_time > 0 %}
            <span class="text-gray-300 dark:text-gray-600">&middot;</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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <span>{{ post.reading_time }} min read</span>
            </div>
            {% endif %}
        </div>
        {% if post.tags | length > 0 %}
        <div class="flex flex-wrap gap-2 mt-4">
            {% for tag in post.tags %}
            <a href="{{ site.config.base_url }}/tags/{{ tag | slugify }}/" 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 hover:bg-blue-100 dark:hover:bg-blue-500/20 transition-colors">{{ tag }}</a>
            {% 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">
        {% if prev_post is defined or next_post is defined %}
        <nav class="flex justify-between items-start mb-8">
            <div class="flex-1">
                {% if prev_post is defined %}
                <span class="text-sm text-gray-500 dark:text-gray-400">Previous</span>
                <a href="{{ site.config.base_url }}/posts/{{ prev_post.slug }}/" class="block text-blue-500 dark:text-blue-400 hover:text-blue-600 dark:hover:text-blue-300 font-medium transition-colors mt-1">&larr; {{ prev_post.title }}</a>
                {% endif %}
            </div>
            <div class="flex-1 text-right">
                {% if next_post is defined %}
                <span class="text-sm text-gray-500 dark:text-gray-400">Next</span>
                <a href="{{ site.config.base_url }}/posts/{{ next_post.slug }}/" class="block text-blue-500 dark:text-blue-400 hover:text-blue-600 dark:hover:text-blue-300 font-medium transition-colors mt-1">{{ next_post.title }} &rarr;</a>
                {% endif %}
            </div>
        </nav>
        {% endif %}

        <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 %}