{{ define "main" }}
<div class="mx-auto px-4 py-12 max-w-4xl">
  <!-- Page title -->
  <h1 class="text-4xl md:text-5xl font-bold text-accent mb-12">
    {{ .Title }}
  </h1>

  <!-- Articles list -->
  <div class="space-y-2 max-w-2xl">
    {{ $pinned := where .Pages "Params.pinned" true }}
    {{ $unpinned := where .Pages "Params.pinned" false }}

    <!-- Pinned posts first -->
    {{ range (sort $pinned "Date" "desc") }}
      {{ partial "article-list-item.html" . }}
    {{ end }}

    <!-- Regular posts -->
    {{ range (sort $unpinned "Date" "desc") }}
      {{ partial "article-list-item.html" . }}
    {{ end }}

    <!-- Empty state -->
    {{ if eq (len .Pages) 0 }}
      <div class="py-12 text-center text-text-dim">
        {{ i18n "noRelated" }}
      </div>
    {{ end }}
  </div>
</div>
{{ end }}