{{ define "main" }}
<div class="hx:mx-auto hx:flex hextra-max-page-width">
    {{ partial "sidebar.html" (dict "context" . "disableSidebar" true
    "displayPlaceholder" true) }}
    <article
        class="hx:w-full hx:break-words hx:flex hx:min-h-[calc(100vh-var(--navbar-height))] hx:min-w-0 hx:justify-center hx:pb-8 hx:pr-[calc(env(safe-area-inset-right)-1.5rem)]"
    >
        <main
            id="content"
            class="hx:w-full hx:min-w-0 hextra-max-content-width hx:px-6 hx:pt-0 hx:md:px-12"
        >
            {{ partial "breadcrumb.html" (dict "page" . "enable" false) }}
            <br class="hx:mt-1.5 hx:text-sm" />
            <div class="content">{{ .Content }}</div>

            {{- $pages := partial "utils/sort-pages" (dict "page" . "by"
            site.Params.blog.list.sortBy "order"
            site.Params.blog.list.sortOrder) -}} {{- $batch :=
            site.Params.blog.list.pagerSize | default 10 }} {{- $total := len
            $pages }}

            <div id="post-list">
                {{- range $i, $p := $pages }}
                <div
                    class="hx:mb-10 blog-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:mt-8 hx:text-2xl"
                            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>
                    {{ if site.Params.blog.list.displayTags }}
                    <div class="hx:text-sm hx:leading-7">
                        {{ partial "tags.html" (dict "context" $p) }}
                    </div>
                    {{ end }}
                    <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>

            {{- if gt $total $batch }}
            <div id="load-more-trigger" class="hx:h-4"></div>
            {{- end }}
        </main>
    </article>
    <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('.blog-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 }}