{% extends "base.html" %}
{% block title %}{{title}}{% endblock %}

{% block head %}
{{ super() }}
<link rel="stylesheet" href="{{style_url}}">
<style>
{% if theme == "dark" %}
body { background-color: #0d1117; }
{% elif theme == "light" %}
body { background-color: #ffffff; }
{% else %}
@media (prefers-color-scheme: dark) {
    body {
        background-color: #0d1117;
    }
}
{% endif %}
.markdown-body {
    box-sizing: border-box;
    min-width: 200px;
    max-width: 980px;
    margin: 0 auto;
    padding: 45px;
}
</style>
{% endblock %}

{% block body %}
<div class="markdown-body"{% if theme != "auto" %} data-theme="{{theme}}"{% endif %}>
    {# <p><a href='#' onclick='history.back();'>Go back</a></p> #}
    {# <p><a href='/'>Home</a></p> #}
    {{markdown_body|safe}}
    {% endblock %}

    {% block extra %}

    {% if enable_latex %}
    {# KaTeX #}
    <script nomodule defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.js" integrity="sha384-IolEJdmwZJpJkyCvXBnmGt8wXcP3nvRjxBjPv7/PWW7oODJhZ+qiY1sDpwgjcKLT" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.css" integrity="sha384-K1E1xaIzoWihlXfiT5fcmLNabsnrl+dqc0errnRwtMX14tKRA9cCYNDGnXiHEZMs" crossorigin="anonymous">
    <script type="module" type="text/javascript">
        import katex from 'https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.mjs';
        const nodes = Array.from(document.body.querySelectorAll('.math'))
        for (const node of nodes) {
            const isDisplay = node.classList.contains('math-display');
            katex.render(node.textContent, node, {
                throwOnError: false,
                displayMode: isDisplay
            });
        }
    </script>
    {% endif %}

    {% if enable_reload %}
    {# Live reload on fs watcher notification #}
    <script>
        const wsUrl = "{{websocket_url}}";
        console.assert(wsUrl);
        const socket = new WebSocket(wsUrl, "ping");
        console.log("WS: ", socket);
        socket.onmessage = (e) => console.log(e);
        socket.addEventListener("message", (event) => {
            console.log("WS message: ", event.data);
            window.location.reload();
        });
        socket.addEventListener("error", (event) => {
            console.log("WS error: ", event);
        });
    </script>
    {% endif %}
</div>
{% endblock %}