{{ 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 }}
