{{ define "main" }}

{{ $enquire := resources.Get "js/enquire.min.js" | resources.Fingerprint }}
<script src="{{ $enquire.RelPermalink }}"></script>

<main class="main inner">
    <div class="list__main {{ if $.Param "enableSidebar" }}{{ if eq .Site.Params.sidebarPosition "left" }}mr{{ else }}lm{{ end }}{{ else }}lmr{{ end }}">
        {{ partial "body/breadcrumb" . }}
        <header class="list__header">
            <h5 class="list__header--title capitalize h5">{{.Title}}</h5>
        </header>

        <div class="list__header--desc p2">
            {{ .Content }}
        </div>

        <div class="summary__container">
            {{ $paginator := .Paginate (where .Pages "Type" .Type) }}
            {{ range $paginator.Pages }}
                {{ .Render "summary" }}
            {{ end }}
        </div>
        {{ partial "pagination/pagination" . }}
    </div>    

    {{ if $.Param "enableSidebar" }}
        <aside class="list__sidebar {{ if eq .Site.Params.sidebarPosition "left" }}l{{ else }}r{{ end }}">
            {{ partial "sidebar/sidebar-list" . }}
        </aside>
    {{ end }}
</main>

<script>
    {{ $sidebarPosition:= .Site.Params.sidebarPosition }}
    var sidebarPosition = JSON.parse({{ $sidebarPosition | 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 () {
            listMainElem.classList.remove(gridBig);
            listMainElem.classList.add(gridFull);
            listSideElem.classList.remove(gridSmall);
            listSideElem.classList.add('hide');
        },
        unmatch: function () {
            listMainElem.classList.remove(gridFull);
            listMainElem.classList.add(gridBig);
            listSideElem.classList.add(gridSmall);
            listSideElem.classList.remove('hide');

            document.getElementsByClassName('navbar__burger')[0].classList.remove('is-active');
            document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active');
            document.getElementsByClassName('mobile-search')[0].classList.add('hide');
        },
        setup: function () { },
        deferSetup: true,
        destroy: function () { },
    });
</script>
{{ partial "script/list-script" . }}
{{ end }}