{{ define "main" }}
<section class="mw7 center">
  <h2 class="baskerville f2 fw1 ph3 ph0-l near-white lh-title">{{ .Title }}</h2>
    <section class="">
        {{ range .Data.Terms.ByCount }}
        <a class="dib near-white 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 near-white" href="{{ .Name | urlize }}">
                {{ .Name }} ({{ .Pages | len }})
            </a>
            </h4>
            <ul class="list ml0">
            {{ range .Pages.ByDate }}
                <li class="pv1 fa-check fas">
                <a class="link dim near-white lh-copy" href="{{ .Permalink }}">
                    {{ .Title }}
                </a>
                <span class="white-60"> - {{ .Date | time.Format ":date_long" }}</span>
                </li>
            {{ end }}
            </ul>
        </div>
        {{ end }}
    </section>
</section>
{{ end }}