{% extends "base.html" %}

{% block title %}{% if current_page > 1 %}Page {{ current_page }} | {% endif %}{{ site.config.title }}{% endblock %}

{% block content %}
<div class="space-y-16">
    <section>
        <div class="flex items-center justify-between mb-8">
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white">
                {% if current_page > 1 %}Posts - Page {{ current_page }}{% else %}Posts{% endif %}
            </h1>
            <div class="h-px flex-1 bg-gradient-to-r from-gray-200 dark:from-gray-700 to-transparent ml-6"></div>
        </div>

        <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
            {% for post in posts %}
            <article class="group relative bg-white dark:bg-gray-800/50 rounded-2xl border border-gray-200 dark:border-gray-700/50 overflow-hidden hover:shadow-xl hover:shadow-blue-500/5 dark:hover:shadow-blue-500/10 transition-all duration-300 hover:-translate-y-1">
                <div class="absolute inset-0 bg-gradient-to-br from-blue-500/5 to-purple-500/5 dark:from-blue-500/10 dark:to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                <div class="relative p-6">
                    <div class="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 mb-3">
                        <time>{{ post.date | date(format="%B %d, %Y") }}</time>
                        {% if post.reading_time > 0 %}
                        <span class="text-gray-300 dark:text-gray-600">&middot;</span>
                        <span>{{ post.reading_time }} min read</span>
                        {% endif %}
                    </div>
                    <h3 class="text-xl font-semibold mb-3 text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
                        <a href="{{ site.config.base_url }}/posts/{{ post.slug }}/" class="after:absolute after:inset-0">{{ post.title }}</a>
                    </h3>
                    {% if post.excerpt %}
                    <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed mb-4 line-clamp-3">{{ post.excerpt }}</p>
                    {% endif %}
                    {% if post.tags | length > 0 %}
                    <div class="flex flex-wrap gap-2 relative z-10">
                        {% 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-xs 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 %}
                </div>
            </article>
            {% endfor %}
        </div>

        {% if total_pages > 1 %}
        <nav class="mt-12 flex justify-center items-center gap-4">
            {% if prev_page_url %}
            <a href="{{ prev_page_url }}" class="px-4 py-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 hover:border-blue-300 dark:hover:border-blue-500 transition-colors font-medium">&larr; Newer</a>
            {% endif %}
            <span class="text-gray-500 dark:text-gray-400 text-sm">Page {{ current_page }} of {{ total_pages }}</span>
            {% if next_page_url %}
            <a href="{{ next_page_url }}" class="px-4 py-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 hover:border-blue-300 dark:hover:border-blue-500 transition-colors font-medium">Older &rarr;</a>
            {% endif %}
        </nav>
        {% endif %}
    </section>
</div>
{% endblock %}