{{ define "main" }}
<!-- layouts/_default/list.html -->
<div class="min-h-screen bg-white">
    
    <!-- Hero Section with Category Title -->
    <section class="gradient-bg py-12 md:py-16 lg:py-20">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="max-w-4xl mx-auto text-center">
                <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6">
                    {{ if .Title }}{{ .Title }}{{ else }}{{ .Site.Title }}{{ end }}
                </h1>
                {{ if .Description }}
                <p class="text-xl text-gray-700 mb-8">{{ .Description }}</p>
                {{ else if .Site.Params.seo.description }}
                <p class="text-xl text-gray-700 mb-8">{{ .Site.Params.seo.description }}</p>
                {{ end }}
                
                <!-- Category tags if this is a taxonomy page -->
                {{ if eq .Kind "taxonomy" }}
                <div class="flex flex-wrap justify-center gap-3 mb-10">
                    <span class="tag bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded-full">{{ .Title }}</span>
                </div>
                {{ end }}
            </div>
        </div>
    </section>

    <!-- Latest Articles Section -->
    <section id="latest-articles" class="py-12 md:py-16 bg-gray-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <h2 class="text-3xl font-bold text-gray-900 mb-10 text-center">Articles</h2>
            
            {{ $paginator := .Paginate .Pages 9 }}
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
                {{ range $paginator.Pages }}
                <div class="bg-white rounded-xl overflow-hidden shadow-md article-card">
                    <a href="{{ .RelPermalink }}">
                        {{ if .Params.featured_image }}
                        <img src="{{ .Params.featured_image }}" alt="{{ .Title }}" class="w-full h-48 object-cover">
                        {{ else }}
                        <img src="/assets/images/col-1.jpg" alt="{{ .Title }}" class="w-full h-48 object-cover">
                        {{ end }}
                    </a>
                    <div class="p-6">
                        <div class="flex flex-wrap gap-2 mb-3">
                            {{ if .Params.categories }}
                                {{ range first 1 .Params.categories }}
                                <a href="/categories/{{ . | urlize }}" class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded hover:underline">{{ . }}</a>
                                {{ end }}
                            {{ end }}
                        </div>
                        <h3 class="text-lg font-bold text-gray-900 mb-3"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
                        <p class="text-gray-600 text-sm mb-4">
                            {{ if .Params.excerpt }}
                            {{ .Params.excerpt }}
                            {{ else if .Summary }}
                            {{ .Summary }}
                            {{ else }}
                            {{ truncate 200 .Content }}
                            {{ end }}
                        </p>
                        <div class="flex items-center justify-between text-sm text-gray-500">
                            <span>{{ .Date | time.Format "2 Jan 2006" }}</span>
                            <a href="{{ .RelPermalink }}" class="text-blue-600 hover:text-blue-800 font-medium text-sm">Lire la suite →</a>
                        </div>
                    </div>
                </div>
                {{ end }}
            </div>
            
            <!-- Pagination -->
            <div class="flex justify-center mt-12">
                {{ if gt .Paginator.TotalPages 1 }}
                    {{ partial "pagination-tailwind.html" .Paginator }}
                {{ end }}
            </div>
        </div>
    </section>
</div>
{{ end }}