<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode | default "en" }}">
    {{- partial "head.html" . -}}
    <body>
        {{- partial "header.html" . -}}
        
        <div class="container">
            {{- block "main" . }}{{- end }}
        </div>
        
        {{- partial "news-ticker.html" . -}}
        {{- partial "footer.html" . -}}
    </body>

    <script src="{{ "js/hugotagsfilter-1.2.2.min.js" | relURL}}"></script>
    <script>
        function toggleDescription(id) {
            document.querySelector(id).classList.toggle("collapsed");
        }
        
        function loadPlayer(id, embed_path) {
            media = document.querySelector('#media-'+ id)

            var iframe = document.createElement('iframe');
            iframe.src = embed_path + '?autoplay=1&title=0';
            iframe.width = 560;
            iframe.height = 315;
            iframe.frameBorder = 0;
            iframe.sandbox = "allow-same-origin allow-scripts allow-popups" ;
            media.appendChild(iframe);
            document.querySelector('#thumb-'+ id).remove();
        }
        
        // remove box around "previous" page nav link (couldn't handle this with CSS nth-child)
        if (document.querySelector('[aria-label="Previous"]')) {
            document.querySelector('[aria-label="Previous"]').parentElement.classList.add('previous-page-link')
        }

        // footer random color
        var color = ['orange','green','blue'];
		var footer = document.getElementById("footer");
		var rand = Math.floor(Math.random() * color.length);
		footer.classList.add(color[rand]);

        // mobile menu
        document.getElementById("menu-button").onclick=function(){
            this.classList.toggle("active");
            document.getElementById("menu").classList.toggle("active");
        }

        // mobile menu - submenu
        submenuLinks = document.querySelectorAll(".has-submenu");
        [...submenuLinks].forEach((t=>{
            t.addEventListener("click",(function(){t.querySelector(".submenu").classList.toggle("active")}))
        }));
        
        // mobile mainfilter
        document.getElementById("filter-link").onclick=function(){document.getElementById("filter").classList.toggle("active")};

        // mobile filter
        filterButtons=document.querySelectorAll(".filter-buttons");
        [...filterButtons].forEach((t=>{
            t.addEventListener("click",(function(){t.querySelector(".filter-buttons-dropdown").classList.toggle("active");
            t.querySelector(".filter-by").classList.toggle("active")}))
        }));

        // load more cards
        document.getElementById("load-more").onclick=function(){
            document.getElementById('load-more-paginator').click();
        }
        
        // filter config
        var htfConfig = {
          filters: [
            {
              name: 'tags',
              prefix: 'tag-',
              buttonClass: 'tag-button',
              allSelector: '#selectAllTags',
              attrName: 'data-tags',
              selectedPrefix: 'stags-',
            },
            {
              name: 'section',
              prefix: 'sect-',
              buttonClass: 'sect-button',
              allSelector: '#selectAllSections',
              attrName: 'data-section',
              selectedPrefix: 'ssect-',
            },
            {
              name: 'contributors',
              prefix: 'cont-',
              buttonClass: 'cont-button',
              allSelector: '#selectAllContributors',
              attrName: 'data-contributors',
              selectedPrefix: 'scont-',
            },
            {
              name: 'sources',
              prefix: 'src-',
              buttonClass: 'src-button',
              allSelector: '#selectAllSources',
              attrName: 'data-sources',
              selectedPrefix: 'ssrc-',
            }
          ],
          showItemClass: "show-item",
          filterItemClass: "filter-item",
          activeButtonClass: "active",
          counterSelector: "selectedItemCount",
          populateCount: true,
          setDisabledButtonClass: "disable-button"
        } 
        var htf = new HugoTagsFilter(htfConfig);
    </script>

</html>

