<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="theme-color" content="#fff">
    <title>Trilium Notes</title>
    <link rel="manifest" href="manifest.webmanifest">

    <style>
        .lds-roller {
            display: inline-block;
            position: relative;
            width: 80px;
            height: 80px;
        }
        .lds-roller div {
            animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
            transform-origin: 40px 40px;
        }
        .lds-roller div:after {
            content: " ";
            display: block;
            position: absolute;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #000;
            margin: -4px 0 0 -4px;
        }
        .lds-roller div:nth-child(1) {
            animation-delay: -0.036s;
        }
        .lds-roller div:nth-child(1):after {
            top: 63px;
            left: 63px;
        }
        .lds-roller div:nth-child(2) {
            animation-delay: -0.072s;
        }
        .lds-roller div:nth-child(2):after {
            top: 68px;
            left: 56px;
        }
        .lds-roller div:nth-child(3) {
            animation-delay: -0.108s;
        }
        .lds-roller div:nth-child(3):after {
            top: 71px;
            left: 48px;
        }
        .lds-roller div:nth-child(4) {
            animation-delay: -0.144s;
        }
        .lds-roller div:nth-child(4):after {
            top: 72px;
            left: 40px;
        }
        .lds-roller div:nth-child(5) {
            animation-delay: -0.18s;
        }
        .lds-roller div:nth-child(5):after {
            top: 71px;
            left: 32px;
        }
        .lds-roller div:nth-child(6) {
            animation-delay: -0.216s;
        }
        .lds-roller div:nth-child(6):after {
            top: 68px;
            left: 24px;
        }
        .lds-roller div:nth-child(7) {
            animation-delay: -0.252s;
        }
        .lds-roller div:nth-child(7):after {
            top: 63px;
            left: 17px;
        }
        .lds-roller div:nth-child(8) {
            animation-delay: -0.288s;
        }
        .lds-roller div:nth-child(8):after {
            top: 56px;
            left: 12px;
        }
        @keyframes lds-roller {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body class="mobile heading-style-<%= headingStyle %>">
<noscript>Trilium requires JavaScript to be enabled.</noscript>

<div id="toast-container" class="d-flex flex-column justify-content-center align-items-center"></div>

<div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>

<%- include('dialogs/confirm.ejs') %>
<%- include('dialogs/protected_session_password.ejs') %>

<script type="text/javascript">
    global = globalThis; /* fixes https://github.com/webpack/webpack/issues/10035 */

    window.baseApiUrl = 'api/';
    window.device = "mobile";
    window.glob = {
        activeDialog: null,
        maxEntityChangeIdAtLoad: <%= maxEntityChangeIdAtLoad %>,
        maxEntityChangeSyncIdAtLoad: <%= maxEntityChangeSyncIdAtLoad %>,
        instanceName: '<%= instanceName %>',
        csrfToken: '<%= csrfToken %>',
        isDev: <%= isDev %>,
        appCssNoteIds: <%- JSON.stringify(appCssNoteIds) %>,
        isProtectedSessionAvailable: <%= isProtectedSessionAvailable %>
    };
</script>

<script src="libraries/jquery.min.js"></script>

<script src="libraries/dayjs.min.js"></script>

<link href="stylesheets/tree.css" rel="stylesheet">
<script src="libraries/fancytree/jquery.fancytree-all-deps.min.js"></script>

<link href="libraries/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="libraries/bootstrap/js/bootstrap.bundle.min.js"></script>

<script src="app/mobile.js" crossorigin type="module"></script>

<link href="api/fonts" rel="stylesheet">
<link href="stylesheets/ckeditor-theme.css" rel="stylesheet">
<link href="stylesheets/theme-light.css" rel="stylesheet">
<% if (themeCssUrl) { %>
    <link href="<%= themeCssUrl %>" rel="stylesheet">
<% } %>
<link href="stylesheets/style.css" rel="stylesheet">

<link rel="stylesheet" type="text/css" href="libraries/boxicons/css/boxicons.min.css">

</body>
</html>
