{{ define "main" }}
<section class="py-16">
  <div class="container-wide">
    <header class="mb-12">
      <h1 class="text-4xl font-medium tracking-tight">Tracks</h1>
      <p class="text-text-secondary mt-2">{{ .Description | default "All audio experiments" }}</p>
    </header>

    {{- $tracks := .Pages -}}
    {{- if $tracks }}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
      {{- range $tracks }}
        {{ partial "track-card.html" . }}
      {{- end }}
    </div>

    {{/* Pagination */}}
    {{- if .Paginator }}
    <nav class="mt-16 flex justify-center gap-4" aria-label="Pagination">
      {{- if .Paginator.HasPrev }}
      <a
        href="{{ .Paginator.Prev.URL }}"
        class="px-4 py-2 border border-border hover:border-text-muted transition-colors"
      >
        Previous
      </a>
      {{- end }}
      {{- if .Paginator.HasNext }}
      <a
        href="{{ .Paginator.Next.URL }}"
        class="px-4 py-2 border border-border hover:border-text-muted transition-colors"
      >
        Next
      </a>
      {{- end }}
    </nav>
    {{- end }}
    {{- else }}
    <p class="text-text-muted">No tracks yet. Check back soon.</p>
    {{- end }}
  </div>
</section>
{{ end }}