<%- js('js/main.js') %>

<% if (is_post() && page.plugins != undefined && page.plugins.includes("tooltip") ){ %>
    <script src="https://unpkg.com/@popperjs/core@2"></script>
    <script src="https://unpkg.com/tippy.js@6"></script>
    <script>
        window.addEventListener('DOMContentLoaded', () => {
            if (typeof (tippy) !== 'undefined') {
                document.querySelectorAll("a[data-tooltip]").forEach(function (x) {
                    let content = x.getAttribute('data-tooltip');
                    tippy(x, {content: content});
                });
            }
        });
    </script>
<% } %>

<% if (is_post() && page.plugins != undefined && page.plugins.includes("katex") ){ %>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.css" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.js" crossorigin="anonymous"></script>
    <script>
        document.querySelectorAll('code').forEach(function (el) {
            const text = el.textContent;
            if (text.startsWith('KaTeX:') || el.classList.contains("language-KaTeX")) {
                // Do stuff if text starts with `latex`
                const renderedKatex = katex.renderToString(
                    text.replace('KaTeX:', ''),
                    {throwOnError: false}
                );
                // Populate katex and additional markup for formatting
                el.outerHTML = `<span class="katex-wrap">${renderedKatex}</span>`;
            }

        })
    </script>
<% } %>


<% if (is_post() && page.plugins != undefined && page.plugins.includes("copyCode") ){ %>
    <script>
        // Get all pre > code elements
        const codeBlocks = document.querySelectorAll('pre > code');
        const initInnerHTML = '<svg height="1em" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path><path fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path> </svg>';
        const successInnerHTML = '<svg height="1em" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>';
        codeBlocks.forEach(function (codeBlock) {
            // Create a copy button element
            const copyButton = document.createElement('button');
            copyButton.className = 'bg-emerald-500 p-2 text-white fadeIn shadow-xl rounded flex items-center absolute top-2 right-2';
            copyButton.innerHTML = initInnerHTML;
            copyButton.style.opacity = "0";
            const parent = codeBlock.parentNode;

            parent.style = "position: relative;"
            parent.insertBefore(copyButton, codeBlock);

            // Add click event listener to copy button
            copyButton.addEventListener('click', () => {
                navigator.clipboard.writeText(codeBlock.textContent).then(() => {
                    copyButton.innerHTML = successInnerHTML;
                    setTimeout(() => {
                        copyButton.innerHTML = initInnerHTML;
                    }, 1000);
                });
            });

            parent.addEventListener('mouseenter', () => {
                copyButton.style.opacity = "1";
            });
            parent.addEventListener('mouseleave', () => {
                copyButton.style.opacity = "0";
            });
        });
    </script>
<% } %>
