{{ define "main" }}
<div class="hx:mx-auto hx:flex hextra-max-page-width">
    {{ partial "sidebar.html" (dict "context" . "disableSidebar" true
    "displayPlaceholder" true) }}
    <main
        id="content"
        class="hx:w-full hx:break-words hx:min-h-[calc(100vh-var(--navbar-height))] hx:min-w-0 hx:pb-8 hx:px-6 hx:pt-4 hx:md:px-12"
    >
        <div class="hx:flex hx:flex-col hx:items-center hx:text-center">
            {{ .Content }}
        </div>

        {{- $pages := where .Site.RegularPages "Section" "blog" }} {{- $pages =
        $pages.ByDate.Reverse }} {{- $batch := 6 }}

        <div class="hx:mt-16" id="post-list">
            {{- range $i, $p := $pages }}
            <div
                class="hx:mb-8 home-post-item{{ if ge $i $batch }} hx:hidden{{ end }}"
                data-index="{{ $i }}"
            >
                <h3>
                    <a
                        style="color: inherit; text-decoration: none"
                        class="hx:block hx:font-semibold hx:text-xl"
                        href="{{ $p.RelPermalink }}"
                        >{{ $p.Title }}</a
                    >
                </h3>
                <p class="hx:opacity-50 hx:text-sm hx:mt-1 hx:leading-7">
                    {{ partial "utils/format-date" $p.Date }}
                </p>
                <a
                    href="{{ $p.RelPermalink }}"
                    style="color: inherit; text-decoration: none"
                >
                    <p class="hx:opacity-80 hx:mt-2 hx:leading-7">
                        {{- partial "utils/page-description" $p -}}
                    </p>
                </a>
            </div>
            {{- end }}
        </div>

        {{- $total := len $pages }} {{- if gt $total $batch }}
        <div id="load-more-trigger" class="hx:h-4"></div>
        {{- end }}
    </main>
    <div class="hx:max-xl:hidden hx:h-0 hx:w-64 hx:shrink-0"></div>
</div>

{{- if gt $total $batch }}
<script>
    (function () {
      var batch = {{ $batch }};
      var total = {{ $total }};
      var visible = batch;
      var items = document.querySelectorAll('.home-post-item');
      var trigger = document.getElementById('load-more-trigger');
      if (!trigger) return;

      function showNext() {
        var next = Math.min(visible + batch, total);
        for (var i = visible; i < next; i++) {
          items[i].classList.remove('hx:hidden');
        }
        visible = next;
        if (visible >= total) {
          trigger.remove();
        }
      }

      var observer = new IntersectionObserver(function (entries) {
        if (entries[0].isIntersecting) showNext();
      }, { rootMargin: '200px' });

      observer.observe(trigger);
    })();
</script>
{{- end }} {{ end }}