{% extends "base.html" %}

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

{% block content %}
<div class="max-w-3xl mx-auto">
    <div class="mb-8">
        <a href="{{ site.config.base_url }}/categories/" class="text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 text-sm font-medium transition-colors">&larr; All categories</a>
    </div>
    <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-8">{{ category_name }}</h1>

    <div class="space-y-6">
        {% for post in posts %}
        <article class="group">
            <div class="flex items-baseline gap-4">
                <time class="text-sm text-gray-500 dark:text-gray-400 shrink-0 tabular-nums">{{ post.date | date(format="%Y-%m-%d") }}</time>
                <h2 class="text-lg font-medium">
                    <a href="{{ site.config.base_url }}/posts/{{ post.slug }}/" class="text-gray-900 dark:text-white hover:text-blue-500 dark:hover:text-blue-400 transition-colors">{{ post.title }}</a>
                </h2>
            </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 %}
</div>
{% endblock %}