{{ define "title" }}{{ .Site.Title }}{{ end }}

{{ define "main" }}
<main class="main inner" data-sidebar-position="{{ $.Param "sidebarPosition" }}">
    <div class="list__main {{ if $.Param "enableSidebar" }}{{ if eq ($.Param "sidebarPosition") "left" }}mr{{ else }}lm{{ end }}{{ else }}lmr{{ end }}">
        <div class="summary__container" data-display="block">
            {{ $filteredPages := .Site.RegularPages }}
            {{ range $.Param "notAllowedTypesInHome" }}
                {{ $filteredPages = (where $filteredPages "Type" "!=" (lower .)) }}
            {{ end }}
            {{ $paginator := .Paginate $filteredPages }}
            {{ range $paginator.Pages }}
                {{ .Render "summary" }}
            {{ end }}
            {{ partial "pagination/pagination" . }}
        </div>
        {{ partial "search/search-result-desktop" . }}
    </div>

    {{ if $.Param "enableSidebar" }}
        <aside class="list__sidebar {{ if eq ($.Param "sidebarPosition") "left" }}l{{ else }}r{{ end }}" data-dir="{{ $.Param "languagedir" | default "ltr" }}">
            {{ partial "sidebar/sidebar-home" . }}
        </aside>
    {{ end }}
</main>
<script>
    {{ $sidebarPosition:= $.Param "sidebarPosition" }}
    var sidebarPosition = JSON.parse({{ $sidebarPosition | jsonify }});
    {{ $enableSidebar:= $.Param "enableSidebar" }}
    var enableSidebar = JSON.parse({{ $enableSidebar | jsonify }});
    
    var listMainElem = document.querySelector('.list__main');
    var listSideElem = document.querySelector('.list__sidebar');

    var gridSmall = 'l';
    var gridBig = 'mr';
    var gridFull = 'lmr'

    if (sidebarPosition === "right") {
        gridSmall = 'r';
        gridBig = 'lm'
    }

    enquire.register("screen and (max-width: 769px)", {
        match: function () {
            if (enableSidebar) {
                listMainElem.classList.remove(gridBig);
                listMainElem.classList.add(gridFull);
                listSideElem.classList.remove(gridSmall);
                listSideElem.classList.add('hide');
            } else {
                if (listMainElem && !listMainElem.classList.contains(gridFull)) {
                    listMainElem.classList.remove(gridBig);
                    listMainElem.classList.add(gridFull);
                }

                if (listSideElem && !listSideElem.classList.contains('hide')) {
                    listSideElem.classList.add('hide');
                }
            }
            
        },
        unmatch: function () {
            if (enableSidebar) {
                listMainElem.classList.remove(gridFull);
                listMainElem.classList.add(gridBig);
                listSideElem.classList.add(gridSmall);
                listSideElem.classList.remove('hide');
            } else {
                if (listMainElem && !listMainElem.classList.contains(gridFull)) {
                    listMainElem.classList.remove(gridBig);
                    listMainElem.classList.add(gridFull);
                }

                if (listSideElem && !listSideElem.classList.contains('hide')) {
                    listSideElem.classList.add('hide');
                }
            }

            var navCollapseBtn = document.querySelector('.navbar__burger');
            var navCollapse = document.getElementsByClassName('navbarm__collapse')[0];
            if (navCollapse) {
                navCollapse.setAttribute('data-open', false);
                navCollapse.style.maxHeight = 0;
                navCollapseBtn.classList.remove('is-active');
            }
            if (document.getElementsByClassName('navbar__menu')[0]) {
                document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active');
            }
            if (document.getElementsByClassName('mobile-search')[0]) {
                document.getElementsByClassName('mobile-search')[0].classList.add('hide');
            }
        },
        setup: function () { },
        deferSetup: true,
        destroy: function () { },
    });
</script>
{{ partial "script/home-script" . }}
{{ end }}