{{ 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="inline-block text-black transition hover:scale-105 p-2 m-1 border border-black rounded"
          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 border-b-2 border-gray-300"
          data-tag="{{ .Name | lower }}"
        >
          <h4 class="mx-auto">
            <a class="hover:opacity-50" href="{{ .Name | urlize }}">
              {{ .Name }} ({{ .Pages | len }})
            </a>
          </h4>
          <ul class="list">
            {{ range .Pages.ByDate }}
              <li class="transition hover:scale-105 even:bg-gray-200 p-2">
                <a class="hover:opacity-50 block" href="{{ .RelPermalink }}">
                  {{ $dateFormat := .Site.Params.dateFormat | default ":date_medium" }}
                  <time
                    datetime="{{ .Date.Format "2006-01-02" }}"
                    class="text-sm float-right ml-2"
                  >
                    <i class="far fa-calendar"></i>
                    {{ time.Format $dateFormat .Date }}
                  </time>
                  {{ .Title }}
                </a>
              </li>
            {{ end }}
          </ul>
        </div>
      {{ end }}
    </section>
  </section>
{{ end }}