{{define "base"}}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ template "title" . }}</title>

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
        integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css"
        integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js"
        integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4"
        crossorigin="anonymous"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js"
        integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa"
        crossorigin="anonymous"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            renderMathInElement(document.body, {
                delimiters: [
                    { left: "$", right: "$", display: false },
                    { left: "$$", right: "$$", display: true },
                    { left: "\\(", right: "\\)", display: false },
                    { left: "\\[", right: "\\]", display: true }
                ]
            });
        });

        document.addEventListener('DOMContentLoaded', () => {
            const $toggle = document.querySelector('#toggle-dark-mode');
            const $toggleIcon = document.querySelector('#toggle-dark-mode i');            

            // Loads prefered dark from from localStorage or default to media query.
            let prefersDarkMode = localStorage.getItem('theme') === 'dark'
                || window.matchMedia('(prefers-color-scheme: dark)').matches;
            
            function storePrefersDarkMode(mode) {
                prefersDarkMode = mode;
                localStorage.setItem('theme', mode ? 'dark' : 'light');
            }

            function displayToggle() {
                document.body.classList.toggle('dark-mode', prefersDarkMode);
                $toggleIcon.classList.toggle('fa-moon', prefersDarkMode);
                $toggleIcon.classList.toggle('fa-sun', !prefersDarkMode);
            }

            $toggle.addEventListener('click', () => {
                storePrefersDarkMode(!prefersDarkMode);
                displayToggle();
            });

            displayToggle();
        });
    </script>

    <link rel="stylesheet" href="/assets/style.css">
    <link rel="stylesheet" href="/assets/theme-dark.css">
</head>

<body>
    <nav>
        <!-- Site -->
        <div class="nav-logo">
            <a class="nav-element" href="/">
                <img src="assets/images/logo-circuit-board.svg" alt="phc-logo">
            </a>
        </div>
        <div class="nav-main">
            <div class="nav-item">
                <a class="nav-element" href="/utenti">Utenti</a>
            </div>
            <div class="nav-item">
                <a class="nav-element" href="/news">News</a>
            </div>
            <div class="nav-item dropdown">
                <div class="name">
                    <a class="nav-element" href="/progetti">
                        <div class="icon">
                            <i class="fas fa-chevron-down"></i>
                        </div>
                        <div class="label">
                            Progetti
                        </div>
                    </a>
                </div>
                <div class="nav-items">
                    <div class="nav-item">
                        <a class="nav-element" href="{{ .Config.GitUrl }}">Gitea</a>
                    </div>
                    <div class="nav-item">
                        <a class="nav-element" href="{{ .Config.ForumUrl }}">Zulip</a>
                    </div>
                    <div class="nav-item">
                        <a class="nav-element" href="/guide">Guide</a>
                    </div>
                    <div class="nav-item">
                        <a class="nav-element" href="/seminari">Seminari</a>
                    </div>
                </div>
            </div>
            <div class="nav-item">
                <a class="nav-element" href="/storia">Storia</a>
            </div>
            <div class="nav-item">
                <a class="nav-element" href="/about">About</a>
            </div>

            <div class="nav-item filler"></div>

            <!-- User Related -->
            <div class="nav-item">
                <div id="toggle-dark-mode" class="nav-button">
                    <i class="fas fa-moon"></i>
                </div>
            </div>
            {{if .User}}
            <div class="nav-item">
                <a class="nav-element" href="/profile">@{{ .User }}</a>
            </div>
            {{else}}
            <div class="nav-item">
                <a class="nav-element" href="/login">Accedi</a>
            </div>
            {{end}}
        </div>
    </nav>

    <div class="main">
        {{ template "body" . }}
    </div>

    <footer>
        <div class="footer-item">
            macchinisti@poisson.phc.dm.xxxxx.xx
        </div>
    </footer>
</body>

</html>
{{end}}