{{include "header.html"}}
{{include "nav.html"}}

{{$col := .Single}}
<section class="bg-gray-900 py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
            <h1 class="text-3xl md:text-4xl font-bold text-white mb-4">
                {{if $col}}{{$col.Name}}{{else}}{{.Title}}{{end}}
            </h1>
            {{if and $col $col.Description}}
            <p class="text-lg text-gray-400 max-w-2xl mx-auto">{{$col.Description}}</p>
            {{end}}
        </div>
    </div>
</section>

<section class="py-12 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {{if .List}}
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {{range .List}}
            <article class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition group">
                <a href="{{.URL}}" class="block">
                    <div class="relative h-48 overflow-hidden">
                        {{if .Img}}
                        <img src="{{.Img}}" alt="{{.Title}}" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
                        {{else}}
                        <div class="w-full h-full bg-gray-200 flex items-center justify-center">
                            <svg class="w-12 h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                            </svg>
                        </div>
                        {{end}}
                    </div>
                    <div class="p-5">
                        <div class="flex items-center text-sm text-gray-500 mb-2">
                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                            </svg>
                            {{date "2006-01-02" .CreatedAt}}
                        </div>
                        <h3 class="text-lg font-semibold text-gray-900 mb-2 group-hover:text-primary transition">{{.Title}}</h3>
                        <p class="text-gray-600 text-sm line-clamp-2">{{.Description}}</p>
                    </div>
                </a>
            </article>
            {{end}}
        </div>
        
        {{if .Pager.Enabled}}
        <div class="mt-12 flex justify-center">
            <nav class="flex items-center space-x-1">
                {{if .Pager.HasPrev}}
                <a href="{{.Pager.PrevURL}}" class="px-3 py-2 rounded bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 transition">
                    Previous
                </a>
                {{end}}
                {{range .Pager.Items}}
                {{if eq .Kind "gap"}}
                <span class="px-3 py-2 text-gray-500">...</span>
                {{else if .Active}}
                <span class="px-3 py-2 rounded bg-primary text-white">{{.Label}}</span>
                {{else if eq .Kind "control"}}
                <span class="px-3 py-2 rounded bg-gray-100 text-gray-400 cursor-not-allowed">{{.Label}}</span>
                {{else}}
                <a href="{{.URL}}" class="px-3 py-2 rounded bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 transition">{{.Label}}</a>
                {{end}}
                {{end}}
                {{if .Pager.HasNext}}
                <a href="{{.Pager.NextURL}}" class="px-3 py-2 rounded bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 transition">
                    Next
                </a>
                {{end}}
            </nav>
        </div>
        {{end}}
        {{else}}
        <div class="text-center py-16">
            <svg class="w-16 h-16 text-gray-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/>
            </svg>
            <p class="text-gray-500 text-lg">No articles found</p>
        </div>
        {{end}}
    </div>
</section>

{{include "footer.html"}}
{{include "js.html"}}