<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/css/stylesheet.css">
    <link rel="stylesheet" href="/css/fontawesome.css">
    <link rel="stylesheet" href="/css/ubuntu-mono.css">
    <link rel="stylesheet" href="/css/source-sans-pro.css">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/res/apple-touch-icon-144x144.png" />
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="/res/apple-touch-icon-152x152.png" />
    <link rel="icon" type="image/png" href="/res/favicon-32x32.png" sizes="32x32" />
    <link rel="icon" type="image/png" href="/res/favicon-16x16.png" sizes="16x16" />
    <title>{{.Title}} - Shiori - Bookmarks Manager</title>
</head>

<body>
    <div id="cache-page">
        <div id="menu">
            <a href="/">
                <i class="fas fa-fw fa-home"></i> Back to home</a>
            <a id="toggle-light">
                <i class="fas fa-fw fa-moon"></i> Use dark mode</a>
        </div>
        <div id="metadata">
            <a href="{{.URL}}">{{.URL}}</a>
            <h3>{{.Title}}</h3>
            {{if gt .MaxReadTime 0}} {{if eq .MinReadTime .MaxReadTime}}
            <p>{{.MinReadTime}} minutes read time</p>
            {{else}}
            <p>{{.MinReadTime}}-{{.MaxReadTime}} minutes read time</p>
            {{end}} {{end}}
        </div>
        <div id="content">
            {{html .HTML}}
        </div>
    </div>
    <script>
        var useDarkMode = localStorage.getItem('dark-mode') !== null,
            cachePage = document.getElementById('cache-page'),
            btnToggleLight = document.getElementById('toggle-light');

        function updatePage() {
            if (useDarkMode) {
                localStorage.setItem('dark-mode', '');
                cachePage.className = 'dark-mode';
                btnToggleLight.innerHTML = '<i class="fas fa-fw fa-sun"></i> Use light mode</a>';
            } else {
                localStorage.removeItem('dark-mode');
                cachePage.removeAttribute('class');
                btnToggleLight.innerHTML = '<i class="fas fa-fw fa-moon"></i> Use dark mode</a>';
            }
        }

        btnToggleLight.onclick = function () {
            useDarkMode = !useDarkMode;
            updatePage();
        };

        updatePage();
    </script>
</body>

</html>