{{ define "main" }}
<div class="container mx-auto px-4 py-12">
    <div class="max-w-4xl mx-auto">
        <header class="mb-12">
            <h1 class="text-4xl font-bold mb-4">
                {{ .Title }}
            </h1>
            <div class="text-xl text-gray-600">
                Browse all {{ .Data.Plural }}
            </div>
        </header>

        <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            {{ range .Data.Terms.ByCount }}
                <a href="{{ .Page.RelPermalink }}" 
                   class="group p-6 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200">
                    <h2 class="text-xl font-semibold mb-2 group-hover:text-primary-600">
                        {{ .Page.Title }}
                    </h2>
                    <div class="text-gray-600">
                        {{ .Count }} 
                        {{ if eq .Count 1 }}
                            post
                        {{ else }}
                            posts
                        {{ end }}
                    </div>
                </a>
            {{ end }}
        </div>

        {{ if not .Data.Terms }}
            <div class="text-center py-12 text-gray-600">
                No {{ .Data.Plural }} found
            </div>
        {{ end }}
    </div>
</div>
{{ end }}