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

{{ define "main" }}
  <section class="max-w-screen-md mx-auto">
    <section class="mt-4">
      {{ range .Data.Terms.ByCount }}
        <a
          class="dib text-black transition hover:scale-105 hover-bg-white-80 hover-near-black p-2 ba m-1 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="p-1 pa2-ns bb"
          data-tag="{{ .Name | lower }}"
        >
          <h4 class="f4 bold mx-auto lh-title">
            <a class="hover:opacity-50 color-inherit" href="{{ .Name | urlize }}">
              {{ .Name }} ({{ .Pages | len }})
            </a>
          </h4>
          <ul class="list">
            {{ range .Pages.ByDate }}
              <li class="lh-copy transition hover:scale-105 stripe-dark p-2">
                <a class="hover:opacity-50 color-inherit block" href="{{ .RelPermalink }}">
                  {{ $dateFormat := .Site.Params.dateFormat | default ":date_medium" }}
                  <time
                    datetime="{{ .Date.Format "2006-01-02" }}"
                    class="f6 fw3 fr ml-2"
                  >
                    <i class="far fa-calendar"></i>
                    {{ time.Format $dateFormat .Date }}
                  </time>
                  {{ .Title }}
                </a>
              </li>
            {{ end }}
          </ul>
        </div>
      {{ end }}
    </section>
  </section>
{{ end }}