<!DOCTYPE html>
<html lang="en">
<head>
    <%
    const hasTree = subRoot.note.hasVisibleChildren();

    // Collect HTML snippets by location
    const htmlSnippetsByLocation = {};
    for (const htmlRelation of note.getRelations("shareHtml")) {
        const htmlNote = htmlRelation.targetNote;
        if (htmlNote) {
            let location = htmlNote.getLabelValue("shareHtmlLocation") || "content:end";
            // Default to :end if no position specified
            if (!location.includes(":")) {
                location = location + ":end";
            }
            if (!htmlSnippetsByLocation[location]) {
                htmlSnippetsByLocation[location] = [];
            }
            htmlSnippetsByLocation[location].push(htmlNote.getContent());
        }
    }
    const renderSnippets = (location) => {
        const snippets = htmlSnippetsByLocation[location];
        return snippets ? snippets.join("\n") : "";
    };
    %>
    <%- renderSnippets("head:start") %>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="shortcut icon" href="<%= faviconUrl %>">
    <% for (const url of cssToLoad) { %>
        <link href="<%= url %>" rel="stylesheet">
    <% } %>
    <% for (const url of jsToLoad) { %>
        <script type="module" src="<%= url %>"></script>
    <% } %>
    <% if (note.hasLabel("shareDisallowRobotIndexing")) { %>
        <meta name="robots" content="noindex,follow" />
    <% } %>
    
    <%
        const pageTitle = `${note.title}${note.noteId !== subRoot.note.noteId ? ` - ${subRoot.note.title}` : ""}`;

        // Setup some key OpenGraph variables
        const openGraphColor = subRoot.note.getLabelValue("shareOpenGraphColor");
        const openGraphURL = subRoot.note.getLabelValue("shareOpenGraphURL");
        const openGraphDomain = subRoot.note.getLabelValue("shareOpenGraphDomain");
        let openGraphImage = subRoot.note.getLabelValue("shareOpenGraphImage");
        // Relation takes priority and requires some altering
        if (subRoot.note.hasRelation("shareOpenGraphImage")) {
            openGraphImage = `api/images/${subRoot.note.getRelation("shareOpenGraphImage").value}/image.png`;
        }
    %>
    <title><%= pageTitle %></title>
    <script>
        // Load dark/light theme as soon as possible to avoid color flashes.
        let theme = localStorage.getItem("theme");
        if (!theme) {
            theme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light";
        }
        document.documentElement.classList.add(`theme-${theme}`);

        window.glob = {
            isStatic: <%= !!isStatic %>,
            theme
        };
    </script>
    <!-- HTML Meta Tags -->
    <meta name="description" content="<%= note.getLabelValue("shareDescription") %>">
    <!-- Facebook Meta Tags -->
    <meta property="og:url" content="<%= openGraphURL %>">
    <meta property="og:type" content="website">
    <meta property="og:title" content="<%= pageTitle %>">
    <meta property="og:description" content="<%= note.getLabelValue("shareDescription") %>">
    <meta property="og:image" content="<%= openGraphImage %>">
    <!-- Twitter Meta Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta property="twitter:domain" content="<%= openGraphDomain %>">
    <meta property="twitter:url" content="<%= openGraphURL %>">
    <meta name="twitter:title" content="<%= pageTitle %>">
    <meta name="twitter:description" content="<%= note.getLabelValue("shareDescription") %>">
    <meta name="twitter:image" content="<%= openGraphImage %>">
    <!-- Meta Tags Generated via https://opengraph.dev -->
    <meta name="theme-color" content="<%= openGraphColor %>">
    <%- renderSnippets("head:end") %>
</head>
<%
const logoWidth = subRoot.note.getLabelValue("shareLogoWidth") ?? 53;
const logoHeight = subRoot.note.getLabelValue("shareLogoHeight") ?? 40;
const mobileLogoHeight = logoHeight && logoWidth ? 32 / (logoWidth / logoHeight) : "";
const shareRootLink = subRoot.note.hasLabel("shareRootLink") ? subRoot.note.getLabelValue("shareRootLink") : `./${subRoot.note.noteId}`;
const headingRe = /(<h[1-6]>)(.+?)(<\/h[1-6]>)/g;
const headingMatches = [...content.matchAll(headingRe)];
content = content.replaceAll(headingRe, (...match) => {
    const slug = utils.slugify(utils.stripTags(match[2]));
    match[0] = match[0].replace(match[3], `<a id="${slug}" class="toc-anchor" name="${slug}" href="#${slug}">#</a>${match[3]}`);
    return match[0];
});
%>
<body data-note-id="<%= note.noteId %>" class="type-<%= note.type %>" data-ancestor-note-id="<%= subRoot.note.noteId %>">
<%- renderSnippets("body:start") %>
<div id="mobile-header">
    <a href="<%= shareRootLink %>">
            <img src="<%= logoUrl %>" width="32" height="<%= mobileLogoHeight %>" alt="Logo" />
        <%= subRoot.note.title %>
    </a>
    <button aria-label="Show Mobile Menu" id="show-menu-button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"></path></svg></button>
</div>
<div id="split-pane">
    <div id="left-pane">
        <div id="navigation">
            <div id="site-header">
                <a href="<%= shareRootLink %>">
                    <img src="<%= logoUrl %>" width="<%= logoWidth %>" height="<%= logoHeight %>" alt="Logo" />
                    <%= subRoot.note.title %>
                </a>
                <div class="theme-selection">
                    <span id="sitetheme"><%= t("share_theme.site-theme") %></span>
                    <label class="switch">
                      <input type="checkbox" aria-labelledby="sitetheme">
                      <span class="slider"></span>
                      <svg class="dark-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M20.742 13.045a8.088 8.088 0 0 1-2.077.271c-2.135 0-4.14-.83-5.646-2.336a8.025 8.025 0 0 1-2.064-7.723A1 1 0 0 0 9.73 2.034a10.014 10.014 0 0 0-4.489 2.582c-3.898 3.898-3.898 10.243 0 14.143a9.937 9.937 0 0 0 7.072 2.93 9.93 9.93 0 0 0 7.07-2.929 10.007 10.007 0 0 0 2.583-4.491 1.001 1.001 0 0 0-1.224-1.224zm-2.772 4.301a7.947 7.947 0 0 1-5.656 2.343 7.953 7.953 0 0 1-5.658-2.344c-3.118-3.119-3.118-8.195 0-11.314a7.923 7.923 0 0 1 2.06-1.483 10.027 10.027 0 0 0 2.89 7.848 9.972 9.972 0 0 0 7.848 2.891 8.036 8.036 0 0 1-1.484 2.059z"></path></svg>
                      <svg class="light-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M6.993 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007S14.761 6.993 12 6.993 6.993 9.239 6.993 12zM12 8.993c1.658 0 3.007 1.349 3.007 3.007S13.658 15.007 12 15.007 8.993 13.658 8.993 12 10.342 8.993 12 8.993zM10.998 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2h-3zm17 0h3v2h-3zM4.219 18.363l2.12-2.122 1.415 1.414-2.12 2.122zM16.24 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.342 7.759 4.22 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path></svg>
                    </label>
                    <script>
                        const el = document.querySelector(".theme-selection input");
                        el.checked = (glob.theme === "dark");
                    </script>
                </div>
                <% if (hasTree) { %>
                    <div class="search-item">
                        <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"></path></svg>
                        <input type="text" class="search-input" placeholder="<%= t("share_theme.search_placeholder") %>">
                    </div>
                <% } %>
            </div>
        <% if (hasTree) { %>
            <nav id="menu">
                <%- include("tree_item", {note: subRoot.note, activeNote: note, subRoot: subRoot, ancestors}) %>
            </nav>
        <% } %>   
        </div>
    </div>
    <div id="right-pane">
        <div id="main">
            <div id="content" class="type-<%= note.type %><% if (note.type === "text") { %> ck-content<% } %><% if (isEmpty) { %> no-content<% } %>">
                <%- renderSnippets("content:start") %>
                    <h1 id="title"><%= note.title %></h1>
                <% if (isEmpty && (!note.hasVisibleChildren() && note.type !== "book")) { %>
                    <p>This note has no content.</p>
                <% } else { %>
                    <%
                    content = content.replace(/<img /g, `<img alt="${t("share_theme.image_alt")}" loading="lazy" `);
                    %>
                    <%- content %>
                <% } %>
                <%- renderSnippets("content:end") %>
            </div>

            <% if (note.hasVisibleChildren() || note.type === "book") { %>
                <nav id="childLinks" class="<% if (isEmpty) { %>grid<% } else { %>list<% } %>">
                    <% if (!isEmpty) { %>
                        <span><%= t("share_theme.subpages") %></span>
                    <% } %>

                    <ul>
                        <%
                        const action = note.type === "book" ? "getChildNotes" : "getVisibleChildNotes";
                        for (const childNote of note[action]()) {
                            const isExternalLink = childNote.hasLabel("shareExternal") || childNote.hasLabel("shareExternalLink");
                            const linkHref = isExternalLink ? childNote.getLabelValue("shareExternal") ?? childNote.getLabelValue("shareExternalLink") : `./${childNote.shareId}`;
                            const target = isExternalLink ? ` target="_blank" rel="noopener noreferrer"` : "";
                        %>
                            <li>
                                <a class="type-<%= childNote.type %>" href="<%= linkHref %>"<%= target %>><%= childNote.title %></a>
                            </li>
                        <% } %>
                    </ul>
                </nav>
            <% } %>

            <footer id="content-footer">
                <% if (!isEmpty && !isStatic) { %>
                    <div class="updated">
                        <% const lastUpdated = new Date(note.utcDateModified); %>
                        <%- t("share_theme.last-updated", { date: `<time datetime="${lastUpdated.toISOString()}">${lastUpdated.toLocaleDateString()}</time>`}) %>
                    </div>
                <% } %>

                <% if (hasTree) { %>
                    <%- include("prev_next", { note: note, subRoot: subRoot }) %>
                <% } %>
            </footer>
        </div>
        <%
        if (headingMatches.length > 1) {
            const level = (m) => parseInt(m[1].replace(/[<h>]+/g, ""));

            const toc = [
                {
                    level: level(headingMatches[0]),
                    name: headingMatches[0][2],
                    children: []
                }
            ];
            const last = (arr = toc) => arr[arr.length - 1];
            const makeEntry = (m) => ({level: level(m), name: m[2], children: []});
            const getLevelArr = (lvl, arr = toc) => {
                if (arr[0].level === lvl) return arr;
                const top = last(arr);
                return top.children.length ? getLevelArr(lvl, top.children) : top.children;
            };
            
            
            for (let m = 1; m < headingMatches.length; m++) {
                const target = getLevelArr(level(headingMatches[m]));
                target.push(makeEntry(headingMatches[m]));
            }
        %>
            <div id="toc-pane">
                <h3><%= t("share_theme.on-this-page") %></h3>
                <ul id="toc">
                    <% for (const entry of toc) { %>
                        <%- include("toc_item", {entry}) %>
                    <% } %>
                </ul>
            </div>
        <% } %>
    </div>
</div>
<%- renderSnippets("body:end") %>
</body>
</html>
