<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <% if (note.hasLabel("shareDescription")) { %>
        <meta name="description" content="<%= note.getLabelValue("shareDescription") %>">
    <% } %>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <% if (note.hasRelation("shareFavicon")) { %>
    <link rel="shortcut icon" href="api/notes/<%= note.getRelation("shareFavicon").value %>/download">
    <% } else { %>
    <link rel="shortcut icon" href="../favicon.ico">
    <% } %>
    <script src="../<%= appPath %>/share.js"></script>
    <% if (!note.isLabelTruthy("shareOmitDefaultCss")) { %>
        <link href="../<%= assetPath %>/node_modules/normalize.css/normalize.css" rel="stylesheet">
        <link href="../<%= assetPath %>/stylesheets/share.css" rel="stylesheet">
    <% } %>
    <% if (note.type === 'text' || note.type === 'book') { %>
        <link href="../<%= assetPath %>/libraries/ckeditor/ckeditor-content.css" rel="stylesheet">
    <% } %>
    <% for (const cssRelation of note.getRelations("shareCss")) { %>
        <link href="api/notes/<%= cssRelation.value %>/download" rel="stylesheet">
    <% } %>
    <% for (const jsRelation of note.getRelations("shareJs")) { %>
        <script type="module" src="api/notes/<%= jsRelation.value %>/download"></script>
    <% } %>
    <% if (note.isLabelTruthy('shareDisallowRobotIndexing')) { %>
        <meta name="robots" content="noindex,follow" />
    <% } %>
    <%- header %>
    <title><%= note.title %></title>
</head>
<body data-note-id="<%= note.noteId %>" data-ancestor-note-id="<%= subRoot.note.noteId %>">
<div id="layout">
    <div id="main">
        <% if (note.parents[0].noteId !== '_share' && note.parents.length !== 0) { %>
            <nav id="parentLink">
                <%= t("share_page.parent") %> <a href="./<%= note.parents[0].shareId %>"
                                     class="type-<%= note.parents[0].type %>"><%= note.parents[0].title %></a>
            </nav>
        <% } %>

        <h1 id="title"><%= note.title %></h1>

        <% if (note.hasLabel("pageUrl")) { %>
            <div id="noteClippedFrom"><%- t("share_page.clipped-from", { url: `<a href="${note.getLabelValue("pageUrl")}">${note.getLabelValue("pageUrl")}</a>` }) %></div>
        <% } %>

        <% if (!isEmpty) { %>
            <div id="content" class="type-<%= note.type %><% if (note.type === 'text') { %> ck-content<% } %>">
                <%- content %>
            </div>
        <% } %>

        <% if (note.hasVisibleChildren()) { %>
            <nav id="childLinks" class="<% if (isEmpty) { %>grid<% } else { %>list<% } %>">
                <% if (!isEmpty) { %>
                    <hr>
                    <span><%= t("share_page.child-notes") %> </span>
                <% } %>

                <ul>
                    <%
                    for (const childNote of note.getVisibleChildNotes()) {
                        const isExternalLink = childNote.hasLabel('shareExternalLink');
                        const linkHref = isExternalLink ? childNote.getLabelValue('shareExternalLink') : `./${childNote.shareId}`;
                        const target = isExternalLink ? `target="_blank" rel="noopener noreferrer"` : '';
                    %>
                        <li>
                            <a href="<%= linkHref %>" <%= target %>
                               class="type-<%= childNote.type %>"><%= childNote.title %></a>
                        </li>
                    <% } %>
                </ul>
            </nav>
        <% } else if (isEmpty) { %>
            <p><%= t("share_page.no-content") %></p>
        <% } %>
    </div>

    <% if (subRoot.note.hasVisibleChildren()) { %>
        <button id="toggleMenuButton"></button>

        <nav id="menu">
            <%- include('tree_item', {note: subRoot.note, branch: subRoot.branch, activeNote: note}) %>
        </nav>
    <% } %>
</div>
<footer>
    <% if (showLoginInShareTheme === 'true') { %>
        <p><a href="/login" class="login-link">Login</a></p>
    <% } %>
</footer>
</body>
</html>
