{{ define "main" }}
<div class="hx:mx-auto hx:flex hextra-max-page-width">
    {{ partial "sidebar.html" (dict "context" . "disableSidebar" true
    "displayPlaceholder" true) }} {{ partial "toc.html" . }}
    <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-4 hx:md:px-12"
        >
            {{ partial "breadcrumb.html" (dict "page" . "enable" false) }}
            <br class="hx:mt-1.5 hx:text-sm" />
            {{ if .Title }}
            <h1
                class="hx:text-center hx:mt-2 hx:text-4xl hx:font-bold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100"
            >
                {{ .Title }}
            </h1>
            <div class="hx:mb-16"></div>
            {{ end }}
            <div class="content">
                {{ .Content }} {{- with .Params.poet }}
                <div
                    id="typewriter-box"
                    style="
                        opacity: 0;
                        transition: opacity 0.6s;
                        margin-top: 1.5em;
                    "
                >
                    <p id="typewriter-text"></p>
                </div>
                <script>
                    (function () {
                        var all = `{{ . }}`;
                        var i = 0,
                            del = false,
                            dc = 0;
                        var te = document.getElementById("typewriter-text");
                        var box = document.getElementById("typewriter-box");
                        if (!te || !box) return;
                        var obs = new IntersectionObserver(
                            function (e) {
                                if (e[0].isIntersecting) {
                                    box.style.opacity = "1";
                                    obs.disconnect();
                                    go();
                                }
                            },
                            { rootMargin: "120px" },
                        );
                        obs.observe(box);
                        function go() {
                            setTimeout(
                                function () {
                                    if (
                                        !del &&
                                        Math.random() < 0.1 &&
                                        i > 8 &&
                                        all.charAt(i - 1) !== "\n"
                                    ) {
                                        del = true;
                                        dc = Math.floor(Math.random() * 4) + 1;
                                    }
                                    if (del) {
                                        i = Math.max(0, i - 1);
                                        dc--;
                                        if (
                                            dc <= 0 ||
                                            i === 0 ||
                                            all.charAt(i - 1) === "\n"
                                        )
                                            del = false;
                                    } else {
                                        if (i < all.length) i++;
                                    }
                                    te.textContent = all.substring(0, i);
                                    if (i < all.length || del) go();
                                },
                                del
                                    ? 55 + Math.random() * 30
                                    : 70 + Math.random() * 100,
                            );
                        }
                    })();
                </script>
                {{- end }}
            </div>
            <div class="hx:mt-16"></div>
            {{ partial "components/comments.html" . }}
        </main>
    </article>
</div>
{{ end }}