{{- define "main" -}}

<!-- Taxonomy header -->
<header class="gutter-x pt-36 pb-14 border-b border-zinc speed-lines">
  <div class="max-w-4xl">
    <span class="badge badge-frost text-void mb-5 inline-block">Browse</span>
    <h1 class="font-display text-5xl md:text-7xl text-paper leading-none">{{ .Title }}</h1>
  </div>
</header>

<div class="gradient-line"></div>

<!-- Terms badge cloud -->
<section class="gutter-x py-16 md:py-24">
  {{- if .Data.Terms -}}
  <div class="flex flex-wrap gap-4">
    {{- range .Data.Terms.Alphabetical -}}
    <a
      href="{{ .Page.RelPermalink }}"
      class="group card-comic flex items-baseline gap-3 bg-concrete px-5 py-4 hover:border-heat transition-all"
    >
      <span class="font-display text-2xl text-paper group-hover:text-heat transition-colors leading-none">{{ .Page.Title }}</span>
      <span class="badge badge-outline text-xs ml-1 group-hover:bg-heat group-hover:text-white group-hover:border-heat transition-all">{{ .Count }}</span>
    </a>
    {{- end -}}
  </div>
  {{- else -}}
  <p class="label text-fog text-center py-24">No entries yet.</p>
  {{- end -}}
</section>

{{- end -}}