{% 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">{{ page.title }}</h1>

    {% if page.intro %}
    <div class="text-xl text-gray-medium mb-12 max-w-3xl">
        {{ page.intro|richtext }}
    </div>
    {% endif %}

    <!-- Articles grid -->
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
        {% for post in blogpages %}
        <article class="border border-dot rounded bg-white overflow-hidden hover:shadow-lg transition-shadow">
            {% if post.specific.featured_image %}
            <a href="{% pageurl post %}">
                {% image post.specific.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="{% pageurl post %}" class="hover:text-accent transition-colors">
                        {{ post.title }}
                    </a>
                </h2>

                <p class="text-gray-medium text-sm mb-4">
                    {{ post.specific.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.specific.reading_time }} min de lecture</span>
                </div>
            </div>
        </article>
        {% empty %}
        <p class="col-span-3 text-center text-gray-medium py-12">
            Aucun article pour le moment. Reviens bientôt !
        </p>
        {% endfor %}
    </div>
</div>
{% endblock %}