{{ define "main" }}
{{ if .Params.protected }}
<div id="verification">
    <!-- Show password entry box -->
    <div id="secret-word">Unlock it!</div>
    <form id="password-form" onsubmit="checkPassword(); return false;">
        <input type="password" name="password" id="password" placeholder="Please enter password" required>
        <input type="hidden" name="encryptedPassword" id="encrypted-password">
        <input type="submit" value="Submit" name="submit" id="submit">
    </form>
</div>
{{ end }}
<!-- Display unencrypted diary contents -->
<div class="single-container {{ if .Params.protected }}hidden{{ end }}">
    <div class="archive">
        <h1 class="title is-1">{{ .Title }}</h1>
        <div class="title subtitle heading is-6">
            <div class="author-info columns is-vcentered">
                <div class="column">
                    <div class="columns is-vcentered is-mobile">
                        {{ with .Site.Params.authorImage }}
                        <div class="column is-narrow">
                            <img src="{{ . }}" class="author-image">
                        </div>
                        {{ end }}
                        <div class="column">
                            <p>{{ .Site.Params.Author }}</p>
                            <p><time>{{ .PublishDate.Format "January 2, 2006" }}</time>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="small-categories-container">
                    {{ range $idx, $category := .Params.categories }}
                    {{- if ne $idx 0 }}, {{ end }}<a href="{{ " categories/" | relURL }}{{ $category | urlize }}">{{
                        $category }}</a>
                    {{- end }}
                </div>
            </div>
        </div>
        <div class="content article-content">
            <div class="toc-container">
                {{ partial "toc.html" . }}
            </div>
            {{ .Content }}
        </div>
    </div>
    <a href="#" id="scrollToTopButton">
        <svg t="1686753152588" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="3988" width="48" height="48">
            <path
                d="M518.5 360.3c-3.2-4.4-9.7-4.4-12.9 0l-178 246c-3.8 5.3 0 12.7 6.5 12.7H381c10.2 0 19.9-4.9 25.9-13.2L512 460.4l105.2 145.4c6 8.3 15.6 13.2 25.9 13.2H690c6.5 0 10.3-7.4 6.5-12.7l-178-246z"
                p-id="3989" fill="#FAB005"></path>
            <path
                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
                p-id="3990" fill="#FAB005"></path>
        </svg>
    </a>

    {{- /* Comment */ -}}
    {{- partial "comment.html" . -}}
    <div class="pp-container">
        <section class="pre-and-post">
            <div class="has-text-left">
                {{ with .PrevInSection }}
                <p>Previous post</p>
                <a href="{{ .Permalink }}">{{ .Title }}</a>
                {{ end }}
            </div>
            <div class="has-text-right">
                {{ with .NextInSection }}
                <p>Next post</p>
                <a href="{{ .Permalink }}">{{ .Title }}</a>
                {{ end }}
            </div>
        </section>
    </div>

</div>
<script></script>
<script>
    // Quickly reach the top of the article
    document.getElementById('scrollToTopButton').addEventListener('click', function () {
        window.scrollTo({ top: 0, behavior: 'smooth' });
    });
    console.log('window.matchMedia("(max-width: 768px)").matches', window.matchMedia("(max-width: 768px)").matches)
    //Set the element to be displayed on mobile only when the mouse is scrolled up, not when it is scrolled down
    // if (window.matchMedia("(max-width: 768px)").matches) {
    //     var prevScrollPos = window.pageYOffset;

    //     window.addEventListener('scroll', function () {
    //         var currentScrollPos = window.pageYOffset;

    //         if (currentScrollPos < prevScrollPos) {
    //             document.querySelector('#scrollToTopButton').style.display = 'block';
    //         } else {
    //             document.querySelector('#scrollToTopButton').style.display = 'none';
    //         }

    //         prevScrollPos = currentScrollPos;
    //     });
    // }


    // Set the mobile SUBMIT width to the width of the input box
    const passwordInput = document.querySelector("#password");
    const submitButton = document.querySelector("#submit");
    passwordInput.style.width = (passwordInput.scrollWidth) + "px";
    submitButton.style.width = window.getComputedStyle(passwordInput).width;

    window.addEventListener('DOMContentLoaded', () => {
        const submitButton = document.getElementById('submit');
        submitButton.addEventListener('click', function (event) {
            event.preventDefault(); // Blocking the default form submission behavior
            checkPassword();
        });

        function checkPassword() {
            const passwordInput = document.querySelector('input[name="password"]');
            const password = passwordInput.value;
            const correctPassword = "{{ .Params.password }}"; // Get the correct password from the article's meta information

            if (password === correctPassword) {
                // Password verification successful, display the original content
                document.getElementById("verification").style.display = "none";
                document.querySelector(".single-container").classList.remove('hidden');
                //Hide password parameters
                hidePasswordFromURL()
            } else {
                // Password verification failed, error message displayed
                alert("Incorrect password. Please try again.");
            }
        }
        function hidePasswordFromURL() {
            const urlParams = new URLSearchParams(window.location.search);
            urlParams.set('password', '******');
            const newURL = window.location.pathname + '?' + urlParams.toString();
            window.history.replaceState({}, '', newURL);
        }
    });
</script>


{{ end }}