{{ 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 }}">
    {{ 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" data-display="block">
      {{ range .Paginator.Pages.ByWeight }}
        {{ .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-list" . }}
    </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');
      }
      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 }}