<!DOCTYPE html>
<html{{ with .Site.LanguageCode }} lang="{{ . }}"{{ end }}>

<head>
  <link rel="stylesheet" href="{{ "css/chroma.css" | relURL }}" />
  
  <link rel="stylesheet" href="{{ "vendor/bare/css/bare.min.css" | relURL }}" />
  <style>
  /*** Important ***/
  .tf-filter-item {
    display: none;
  }

  button.active {
    background-color: #ddd;
  }
  
  button.disable-button {
    border-style: dashed;
  }
  
  .show-item {
    display: inline-block;
  }

  /*** Aesthetics ***/
  section {
    margin-top: 18px !important;
  }
  .tf-items-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .tf-item {
    width: 250px;
    margin: 8px;
    background: #fff;
    padding: 2rem;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2);
    border-radius: 2px;
    margin-bottom: 2rem
  }

  .chroma {
    overflow-x: auto;
    padding: 4px;
    
  }

  .panel {
      padding: 0 18px;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
  }
  
  .acc:after {
    content: '\02795';
    color: #fff;
    margin-left: 5px;
  }

  .acc.active:after {
      content: "\2796";
  }
  
  .navbtn {
    padding: 0.5rem!important;
    font-size: 90%!important;
    
  }
  .nava {
    text-transform: none;
    font-size: 90%!important;
  }
  </style>
  

  
</head>



<section>


{{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
{{ $sections := .Site.Params.mainSections }}

{{ $.Scratch.Set "authors" (slice ) }}
{{ $.Scratch.Set "noAuthors" 0 }}

{{ range where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
  {{ with .Params.authors }}
    {{ if eq ( printf "%T" . ) "[]string"  }}
      {{ if ( not ( in ($.Scratch.Get "authors") . ) ) }}
        {{ $.Scratch.Add "authors" . }}
      {{ end }}
    {{ else if ( printf "%T" . ) "[]string" }}
      {{ range . }}
        {{ if ( not ( in ($.Scratch.Get "authors") . ) ) }}
          {{ $.Scratch.Add "authors" . }}
        {{ end }}
      {{ end }}
    {{ end }}
  {{ else }}
    {{ $.Scratch.Add "noAuthors" 1 }}
  {{ end }}
{{ end }}


{{ $tags := $.Site.Taxonomies.tags.ByCount }}

{{ $.Scratch.Set "untagged" 0 }}
{{ range $pages }}
  {{ with .Params.tags }}{{ else }}{{ $.Scratch.Add "untagged" 1 }}{{ end }}
{{ end }}


<div class="tf-wrapper">
  <div class="tf-buttons-container flex-grow">
    <h4>Sections</h4>
    <button xx id="selectAllSections" onclick="htf.showAll('section')">
      All Sections
    </button>
    {{ range $sections }}
      <button xx class="sect-button" id="sect-{{ . | urlize }}" onclick="htf.checkFilter('{{ . | urlize }}', 'sect-')">
        {{ . | title }} <span id="ssect-{{ . | urlize }}"> -count-</span> | <span id="csect-{{ . | urlize }}"> -count-</span>
      </button>
    {{ end }}
    
  
    
    <h4>Authors</h4>
    <button xx id="selectAllAuthors" onclick="htf.showAll('authors')">
      All Authors
    </button>
    {{ range $.Scratch.Get "authors" }}
      <button xx class="auth-button" id="auth-{{ . | replaceRE "[.]" "_" | urlize }}" onclick="htf.checkFilter('{{ . | replaceRE "[.]" "_" | urlize }}', 'auth-')">
        {{ . }} <span id="sauth-{{ . | replaceRE "[.]" "_" | urlize }}"> -count-</span> | <span id="cauth-{{ . | replaceRE "[.]" "_" | urlize }}"> -count-</span>
      </button>
    {{ end }}
    {{ if gt ( $.Scratch.Get "noAuthors") 0 }}
    <button xx class="auth-button" id="auth-no-author" onclick="htf.checkFilter('no-author', 'auth-')">
      No Author <span id="sauth-no-author"> -count-</span> | <span id="cauth-no-author"> -count-</span>
    </button>
    {{ end }}
    
    
    
    <h4>Tags</h4>
    <button xx class="" id="selectAllTags" onclick="htf.showAll('tags')">
      All Tags
    </button>
    {{ range $tags }}
      {{ if .Term }}
        <button xx class="tag-button" id="tag-{{ .Term | replaceRE "[.]" "_" | urlize }}" onclick="htf.checkFilter('{{ .Term | replaceRE "[.]" "_" | urlize }}', 'tag-')">
          <span>{{.Term | humanize | title }}</span>
          <span id="stags-{{ .Term | urlize }}"> -count-</span> | <span id="ctags-{{ .Term | urlize }}"> -count-</span>
        </button>
      {{ end }}
    {{ end }}
    {{ if gt ( $.Scratch.Get "untagged") 0 }}
    <button xx class="tag-button" id="tag-tfuntagged" onclick="htf.checkFilter('tfuntagged', 'tag-')">
      Untagged <span id="stags-tfuntagged"> -count-</span> | <span id="ctags-tfuntagged"> -count-</span>
    </button>
    {{ end }}
    
    
    <hr >
  </div>
      
    
  
  <hr >
  <div><h2><span id="selectedItemCount"></span> Items</h2></div>
  <div class="tf-items-container">      
  {{ range $pages.ByPublishDate.Reverse }}
  {{ if in .Params.categories "tv"}}
  {{- partial "video_box.html" . -}}
{{ else if in .Params.categories "calendar" }}
  {{- partial "calendar_card.html" . -}}
{{ else if in .Params.categories "network" }}
  {{- partial "network_card.html" . -}}
{{ else if in .Params.categories "pen" }}
  {{- partial "pen_card.html" . -}}
{{ else if in .Params.categories "shouts" }}
  {{- partial "shout_card.html" . -}}
{{ else if in .Params.categories "books.lumbung.space"}}
{{- partial "book_card.html" . -}}
{{ else }}
  {{- partial "card.html" . -}}
{{ end }}  
  {{ end }}
  </div>

</div>

<script src="{{ "vendor/htf/hugotagsfilter-1.2.2.min.js" | relURL}}"></script>
<!--<script src="{{ "hugotagsfilter.js" | relURL}}"></script>-->
<script>
var htfConfig = {
  filters: [
    {
      name: 'tags',
      prefix: 'tag-',
      buttonClass: 'tag-button',
      allSelector: '#selectAllTags',
      attrName: 'data-tags',
      selectedPrefix: 'stags-',
      countPrefix: 'ctags-'
    },
    {
      name: 'section',
      prefix: 'sect-',
      buttonClass: 'sect-button',
      allSelector: '#selectAllSections',
      attrName: 'data-section',
      selectedPrefix: 'ssect-',
      countPrefix: 'csect-'
      
    },
    {
      name: 'authors',
      prefix: 'auth-',
      buttonClass: 'auth-button',
      allSelector: '#selectAllAuthors',
      attrName: 'data-authors',
      selectedPrefix: 'sauth-',
      countPrefix: 'cauth-'
      
    }
  ],
  showItemClass: "show-item",
  filterItemClass: "filter-item",
  activeButtonClass: "active",
  counterSelector: "selectedItemCount",
  populateCount: true,
  setDisabledButtonClass: "disable-button"
} 
var htf = new HugoTagsFilter(htfConfig);
</script>

<script>
function toggleAcc(el) {
  el.classList.toggle("active")
  var panel = el.nextElementSibling;
  if (panel.style.maxHeight){
    panel.style.maxHeight = null;
  } else {
    panel.style.maxHeight = panel.scrollHeight + "px";
  } 
}
</script>
</section>

</body>


</html>
