{{ define "hero" }}
  {{ partial "hero.html" . }}
{{ end }}

{{ define "main" }}
  <section class="mw7 center">
    <section class="mt3">
      {{ range .Data.Terms.ByCount }}
        <a
          class="dib near-black link grow hover-bg-white-80 hover-near-black pa2 ba ma1 br2"
          href="#{{ .Name | urlize }}-list"
          data-tag="{{ .Name | lower }}"
        >
          {{ .Name }}
        </a>
      {{ end }}
    </section>

    <!-- EACH tag post -->
    <section class="">
      {{ range .Data.Terms.ByCount }}
        <div
          id="{{ .Name | urlize }}-list"
          class="pa1 pa2-ns bb"
          data-tag="{{ .Name | lower }}"
        >
          <h4 class="f4 bold center lh-title">
            <a class="link dim color-inherit" href="{{ .Name | urlize }}">
              {{ .Name }} ({{ .Pages | len }})
            </a>
          </h4>
          <ul class="list ph5">
            {{ range .Pages.ByDate }}
              <li class="lh-copy stripe-dark ph1 pv2">
                {{ $dateFormat := .Site.Params.dateFormat | default "Jan 2, 2006" }}
                <time
                  datetime="{{ .Date.Format "2006-01-02" }}"
                  class="f6 fw3 fr ml2"
                >
                  <i class="far fa-calendar"></i>
                  {{ .Date.Format $dateFormat }}
                </time>
                <a class="link dim color-inherit" href="{{ .Permalink }}">
                  {{ .Title }}
                </a>
              </li>
            {{ end }}
          </ul>
        </div>
      {{ end }}
    </section>
  </section>
{{ end }}