<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>{{ note.title }}</title>

    <!-- Libraries -->
    <script src='{{ url_for("static", filename="jquery.min.js") }}'></script>
    <link rel='stylesheet' type='text/css' href='{{ url_for("static", filename="katex/katex.min.css") }}'>
    <script defer type='text/javascript' src='{{ url_for("static", filename="katex/katex.min.js") }}'></script>

    <!-- Custom -->
    <script src='{{ url_for("static", filename="anno.js") }}'></script>
    <link rel='stylesheet' href='{{ url_for("static", filename="markdown.css") }}'/>
    <link rel='stylesheet' href='{{ url_for("static", filename=highlight_css) }}'/>
    <link rel='stylesheet' href='{{ url_for("static", filename="anno.css") }}'/>
</head>
<body id='note-page'>
    {% include 'flashes.html' %}
    <div class='nav-wrapper'>
        <div class='nav content'>
            <a class='btn' href='/'>Home</a>
            <a class='btn' href='{{ note.url }}/edit'>Edit</a>
            <a class='btn' href='{{ note.url }}/pdf'>PDF</a>
        </div>
    </div>
    <div class='title-wrapper'>
        <div class='title content'>
            <h1>{{ note.title }}</h1>
            {% if note.author %}
                <p class='author'>{{ note.author }}</p>
            {% endif %}
            <p class='date'>{{ note.date | date_to_string }}</p>
            {% if note.meta %}
                <table>
                {% for k, v in note.meta.items() %}
                    {% if k == "labels" %}
                    <tr>
                        <td class='metadata-key'>{{ k }}</td>
                        <td class='metadata-value'>
                            {% for label in v.split(",") %}
                                <a class='label {{ label }}' href='/label/{{ label }}'>{{ label }}</a>
                            {% endfor %}
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td class='metadata-key'>{{ k }}</td>
                        <td class='metadata-value'>{{ v }}</td>
                    </tr>
                    {% endif %}
                {% endfor %}
                </table>
            {% endif %}
        </div>
    </div>
    <div class='anno content markdown-body'>
        {{ text | safe }}
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', ANNO.renderMath);
    </script>
</body>
</html>