{{ define "main" }}
<div class="container mx-auto">

    <div class="inline-flex mb-8">
        <a href="/blog/" class="inline-flex items-center justify-center w-24 flex-1 pl-4 pr-5 py-3 bg-forest">
            <span class="flex-1 h-full text-xl font-medium leading-7 text-center text-white">All</span>
        </a>
        {{ range .Site.Taxonomies.categories }}
        <a href="{{ .Page.Permalink }}"
            class="inline-flex items-center px-4 py-3 border border-forest text-forest hover:bg-forest hover:text-white">
            <span class="h-full text-xl font-medium leading-7 text-center">{{ .Page.Title }}</span>
        </a>
        {{ end }}
    </div>


    {{ $paginator := .Paginate (where .Pages "Type" "blog") }}
    <div class="grid grid-cols-2 gap-16">
        {{ range $paginator.Pages }}
        {{ partial "cards/blog-item" . }}
        {{ end }}
    </div>
    {{ template "partials/pagination.html" . }}



</div>
{{ end }}