{{ $countAll := .countAll }}
<div class="filters">

  <div id="filter-group-ssg" class="filter filter-group-ssg" data-filter-group="ssg">
    <h2>Filters:</h2>

    <!-- Generator -->
    <div class="filter-title">
      <h3>Generator </h3>
      {{ partial "toggle-icon.html" . }}
    </div>
    <ul class="filter-list  d-flex flex-column">
      {{ range .context.Site.Taxonomies.ssg }}
      {{ $count := 0 }}
      {{ if $countAll }}
      {{ $count = .Count }}
      {{ else }}
      {{ range .Pages }}
      {{ if not .Params.stale }}
      {{ if not .Params.disabled }}
      {{ $count = add $count 1 }}
      {{ end }}
      {{ end }}
      {{ end }}
      {{ end }}
      {{ if ge $count 10 }}
      <li id="filter-{{ .Page.Title | urlize }}">
        <button aria-label="filter-button-{{ .Page.Title | urlize }}" id="filter-button-{{ .Page.Title | urlize }}" class="filter-item filter-button" data-toggle=".{{ .Page.Title | urlize }}">
        <span class="filter-select">
        <img width="18" height="18" class="filter-icon" alt="{{ .Page.Title }}" src="{{ .Page.Params.icon | relURL }}" />
        </span>
        <span class="filter-name">{{ .Page.Title }}</span>
        <span class="filter-count" id="filter-count-{{ .Page.Title | urlize}}">{{ $count }}</span>
      </button>
      </li>
      {{ end }}
      {{ end }}
    </ul>

    <ul class="filter-list closed">
      {{ partial "toggle-more.html" . }}
      {{ range .context.Site.Taxonomies.ssg }}
      {{ $count := 0 }}
      {{ if $countAll }}
      {{ $count = .Count }}
      {{ else }}
      {{ range .Pages }}
      {{ if not .Params.stale }}
      {{ if not .Params.disabled }}
      {{ $count = add $count 1 }}
      {{ end }}
      {{ end }}
      {{ end }}
      {{ end }}
      {{ if lt $count 10 }}
      <li id="filter-{{ .Page.Title | urlize }}">
        <button aria-label="filter-button-{{ .Page.Title | urlize }}" id="filter-button-{{ .Page.Title | urlize }}" class="filter-item filter-button" data-toggle=".{{ .Page.Title | urlize }}">
        <span class="filter-select">
        <img width="18" height="18" class="filter-icon" alt="{{ .Page.Title }}" src="{{ .Page.Params.icon | relURL }}" />
        </span>
        <span class="filter-name">{{ .Page.Title }}</span>
        <span class="filter-count" id="filter-count-{{ .Page.Title | urlize}}">{{ $count }}</span>
        </button>
      </li>
      {{ end }}
      {{ end }}
    </ul>

  </div>


  <!-- CSS flavor -->
  <div id="filter-group-css" class="filter filter-group-css" data-filter-group="css">
    <div class="filter-title">
      <h3>CSS Flavor</h3>
      {{ partial "toggle-icon.html" . }}
    </div>

    <ul class="filter-list">
      {{ range .context.Site.Taxonomies.css }}
        {{ $count := 0 }}
        {{ if $countAll }}
          {{ $count = .Count }}
        {{ else }}
          {{ range .Pages }}
            {{ if not .Params.stale }}
              {{ if not .Params.disabled }}
                {{ $count = add $count 1 }}
              {{ end }}
            {{ end }}
          {{ end }}
        {{ end }}
        {{ if ge $count 5 }}
          <li id="filter-{{ .Page.Title | urlize }}">
            <button aria-label="filter-button-{{ .Page.Title | urlize }}" id="filter-button-{{ .Page.Title | urlize }}" class="filter-item filter-button" data-toggle=".{{ .Page.Title | urlize }}">
            <span class="filter-select">
            <img width="18" height="18" class="filter-icon" alt="{{ .Page.Title }}" src="{{ .Page.Params.icon | relURL }}" />
            </span>
            <span class="filter-name">{{ .Page.Title }}</span>
            <span class="filter-count" id="filter-count-{{ .Page.Title | urlize}}">{{ $count }}</span>
            </button>
          </li>
        {{ end }}
      {{ end }}
    </ul>

    <ul class="filter-list closed">
      {{ partial "toggle-more.html" . }}
      {{ range .context.Site.Taxonomies.css }}
        {{ $count := 0 }}
        {{ if $countAll }}
          {{ $count = .Count }}
        {{ else }}
          {{ range .Pages }}
            {{ if not .Params.stale }}
              {{ if not .Params.disabled }}
                {{ $count = add $count 1 }}
              {{ end }}
            {{ end }}
          {{ end }}
        {{ end }}
        {{ if lt $count 5 }}
          <li id="filter-{{ .Page.Title | urlize }}">
            <button aria-label="filter-button-{{ .Page.Title | urlize }}" id="filter-button-{{ .Page.Title | urlize }}" class="filter-item filter-button" data-toggle=".{{ .Page.Title | urlize }}">
            <span class="filter-select">
            <img width="18" height="18" class="filter-icon" alt="{{ .Page.Title }}" src="{{ .Page.Params.icon | relURL }}" />
            </span>
            <span class="filter-name">{{ .Page.Title }}</span>
            <span class="filter-count" id="filter-count-{{ .Page.Title | urlize}}">{{ $count }}</span>
           </button>
          </li>
        {{ end }}
      {{ end }}
    </ul>

  </div>



  <!-- CMS -->
  <div id="filter-group-cms" class="filter filter-group-cms" data-filter-group="cms">
    <div class="filter-title">
      <h3>CMS Editor</h3>
      {{ partial "toggle-icon.html" . }}
    </div>
    <ul class="filter-list">
      {{ range .context.Site.Taxonomies.cms }}
      {{ $count := 0 }}
      {{ if $countAll }}
      {{ $count = .Count }}
      {{ else }}
      {{ range .Pages }}
      {{ if not .Params.stale }}
      {{ if not .Params.disabled }}
      {{ $count = add $count 1 }}
      {{ end }}
      {{ end }}
      {{ end }}
      {{ end }}
      {{ if ge $count 5 }}
      <li id="filter-{{ .Page.Title | urlize }}">
        <button aria-label="filter-button-{{ .Page.Title | urlize }}" id="filter-button-{{ .Page.Title | urlize }}" class="filter-item filter-button" data-toggle=".{{ .Page.Title | urlize }}">
        <span class="filter-select">
        <img width="18" height="18" class="filter-icon" alt="{{ .Page.Title }}" src="{{ .Page.Params.icon | relURL }}" />
        </span>
        <span class="filter-name">{{ .Page.Title }}</span>
        <span class="filter-count" id="filter-count-{{ .Page.Title | urlize}}">{{ $count }}</span>
        </button>
      </li>
      {{ end }}
      {{ end }}
    </ul>

    <ul class="filter-list closed">
      {{ partial "toggle-more.html" . }}
      {{ range .context.Site.Taxonomies.cms }}
      {{ $count := 0 }}
      {{ if $countAll }}
      {{ $count = .Count }}
      {{ else }}
      {{ range .Pages }}
      {{ if not .Params.stale }}
      {{ if not .Params.disabled }}
      {{ $count = add $count 1 }}
      {{ end }}
      {{ end }}
      {{ end }}
      {{ end }}
      {{ if lt $count 5 }}
      <li id="filter-{{ .Page.Title | urlize }}">
        <button aria-label="filter-button-{{ .Page.Title | urlize }}" id="filter-button-{{ .Page.Title | urlize }}" class="filter-item filter-button" data-toggle=".{{ .Page.Title | urlize }}">
        <span class="filter-select">
        <img width="18" height="18" class="filter-icon" alt="{{ .Page.Title }}" src="{{ .Page.Params.icon | relURL }}" />
        </span>
        <span class="filter-name">{{ .Page.Title }}</span>
        <span class="filter-count" id="filter-count-{{ .Page.Title | urlize}}">{{ $count }}</span>
        </button>
      </li>
      {{ end }}
      {{ end }}
    </ul>

  </div>


  <!-- Layout / Composition -->
  <div id="filter-group-archetype" class="filter filter-group-archetype" data-filter-group="archetype">
    <div class="filter-title">
      <h3>Composition</h3>
      {{ partial "toggle-icon.html" . }}
    </div>
    <ul class="filter-list">
      {{ range .context.Site.Taxonomies.archetype }}
        {{ $count := 0 }}
        {{ if $countAll }}
          {{ $count = .Count }}
        {{ else }}
          {{ range .Pages }}
            {{ if not .Params.stale }}
              {{ if not .Params.disabled }}
                {{ $count = add $count 1 }}
              {{ end }}
            {{ end }}
          {{ end }}
        {{ end }}
        {{ if ge $count 5 }}
          <li id="filter-{{ .Page.Title | urlize }}">
            <button aria-label="filter-button-{{ .Page.Title | urlize }}" id="filter-button-{{ .Page.Title | urlize }}" class="filter-item filter-button" data-toggle=".{{ .Page.Title | urlize }}">
            <span class="filter-select">
            <img width="18" height="18" class="filter-icon" alt="{{ .Page.Title }}" src="{{ .Page.Params.icon | relURL }}" />
            </span> 
            <span class="filter-name">{{ .Page.Title }}</span>
            <span class="filter-count" id="filter-count-{{ .Page.Title | urlize}}">{{ $count }}</span>
            </button>
          </li>
        {{ end }}
      {{ end }}
    </ul>

    <ul class="filter-list closed">
      {{ partial "toggle-more.html" . }}
      {{ range .context.Site.Taxonomies.archetype }}
        {{ $count := 0 }}
        {{ if $countAll }}
          {{ $count = .Count }}
        {{ else }}
          {{ range .Pages }}
            {{ if not .Params.stale }}
              {{ if not .Params.disabled }}
                {{ $count = add $count 1 }}
              {{ end }}
            {{ end }}
          {{ end }}
        {{ end }}
        {{ if lt $count 5 }}
          <li id="filter-{{ .Page.Title | urlize }}">
            <button aria-label="filter-button-{{ .Page.Title | urlize }}" id="filter-button-{{ .Page.Title | urlize }}" class="filter-item filter-button" data-toggle=".{{ .Page.Title | urlize }}">
            <span class="filter-select">
            <img width="18" height="18" class="filter-icon" alt="{{ .Page.Title }}" src="{{ .Page.Params.icon | relURL }}" />
            </span>
            <span class="filter-name">{{ .Page.Title }}</span>
            <span class="filter-count" id="filter-count-{{ .Page.Title | urlize}}">{{ $count }}</span>
            </button>
          </li>
        {{ end }}
      {{ end }}
    </ul>

  </div>




</div>