{% extends 'base.html' %}
{% load wagtailcore_tags wagtailimages_tags %}

{% block content %}
<div class="max-w-6xl mx-auto px-4 py-12">
    <h1 class="font-serif text-4xl font-bold mb-4">{{ category.name }}</h1>

    {% if category.description %}
    <p class="text-xl text-gray-medium mb-8">
        {{ category.description }}
    </p>
    {% endif %}

    <p class="text-gray-medium mb-12">
        {{ posts.count }} article{{ posts.count|pluralize }} dans cette catégorie
    </p>

    <!-- Articles grid -->
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
        {% for post in posts %}
        <article class="border border-dot rounded bg-white overflow-hidden hover:shadow-lg transition-shadow">
            {% if post.featured_image %}
            <a href="{{ post.url }}">
                {% image post.featured_image fill-400x250 class="w-full" %}
            </a>
            {% endif %}

            <div class="p-6">
                <h2 class="font-serif text-xl font-bold mb-2">
                    <a href="{{ post.url }}" class="hover:text-accent transition-colors">
                        {{ post.title }}
                    </a>
                </h2>

                <p class="text-gray-medium text-sm mb-4">
                    {{ post.excerpt|truncatewords:25 }}
                </p>

                <div class="flex items-center justify-between text-sm text-gray-medium">
                    <span>{{ post.first_published_at|date:"d M Y" }}</span>
                    <span>{{ post.reading_time }} min de lecture</span>
                </div>
            </div>
        </article>
        {% empty %}
        <p class="col-span-3 text-center text-gray-medium py-12">
            Aucun article dans cette catégorie.
        </p>
        {% endfor %}
    </div>

    <div class="mt-12">
        <a href="/blog/" class="text-accent hover:underline">&larr; Retour au blog</a>
    </div>
</div>
{% endblock %}