{{ define "main" }}
<div class="pt-2">
    <div class="container mx-auto px-4 py-6">
        <div class="flex flex-col md:flex-row gap-6 items-start">
            <!-- Sidebar -->
            <div class="w-full md:w-1/4 lg:w-1/5 pt-1">
                {{ partial "features-sidebar.html" . }}
            </div>

            <!-- Main Content -->
            <main class="w-full md:w-3/4 lg:w-4/5 pt-2">
                <article class="feature-page">
                    <h1 class="text-4xl font-bold text-center mb-5">{{ .Title }}</h1>
                    {{ with .Params.description }}
                    <p class="text-center font-light  text-gray-500 sm:text-xl">{{ . }}</p>
                    {{ end }}

                    <!-- Main Content -->

                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                        {{ $paginator := .Paginate (.Pages.ByWeight) }}
                        {{ range $paginator.Pages }}
                        {{ partial "feature-card.html" . }}
                        {{ end }}
                    </div>

                    {{ $paginator := .Paginate .Pages }}
                    {{ if gt $paginator.TotalPages 1 }}
                    <nav class="mt-12 flex justify-between items-center">
                        {{ if $paginator.HasPrev }}
                        <a href="{{ $paginator.Prev.URL }}"
                            class="inline-flex items-center px-4 py-2 bg-primary-400 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                            </svg>
                            {{ i18n "previous" }}
                        </a>
                        {{ else }}
                        <div></div>
                        {{ end }}

                        <div class="flex space-x-2">
                            {{ range $paginator.Pagers }}
                            {{ if eq . $paginator }}
                            <span class="px-4 py-2 bg-primary-400 text-white rounded-lg">
                                {{ .PageNumber }}
                            </span>
                            {{ else }}
                            <a href="{{ .URL }}"
                                class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors duration-200">
                                {{ .PageNumber }}
                            </a>
                            {{ end }}
                            {{ end }}
                        </div>

                        {{ if $paginator.HasNext }}
                        <a href="{{ $paginator.Next.URL }}"
                            class="inline-flex items-center px-4 py-2 bg-primary-400 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200">
                            {{ i18n "next" }}
                            <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                            </svg>
                        </a>
                        {{ else }}
                        <div></div>
                        {{ end }}
                    </nav>
                    {{ end }}

                    <!-- Global CTA -->
                    {{ partial "components/cta.html" . }}
                </article>
            </main>
        </div>
    </div>
</div>

{{ end }}