{{ 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">
      {{ 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);
    },
    unmatch: function () {
      listMainElem.classList.remove(gridFull);
      listMainElem.classList.add(gridBig);
      listSideElem.classList.add(gridSmall);
      
      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/taxo-script" . }}
{{ end }}