{% load static %}
<!DOCTYPE html>
<html>
<head>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="{% static 'main/css/fonts.css' %}">
    <link rel="stylesheet" href="{% static 'main/css/base.css' %}">
    <link rel="stylesheet" href="{% static 'main/css/topic.css' %}">
    <link rel="stylesheet" href="{% static 'main/css/category.css' %}">
    <link rel="stylesheet" href="{% static 'main/highlight/styles/atom-one-dark.min.css' %}">

    {% if title %}
        <title>TealCode - {{ title }}</title>
    {% else %}
        <title>TealCode</title>
    {% endif %}
</head>
<body>
    <header>
        <h1 style="cursor:pointer;" onclick="window.open('/', '_self')">TealCode</h1>

        <div>
            <a id="a-python" href="/category/python/">Python</a>
            <a id="a-cs" href="/category/cs/">C#</a>
            <a id="a-c++" href="/category/c++/">C++</a>
            <a id="a-c" href="/category/c/">C</a>
            <a id="a-java" href="/category/java/">Java</a>
            <a id="a-javascript" href="/category/javascript/">JavaScript</a>
        </div>
    </header>
    <main>
        <div id="main-content">            
            {% block content %}{% endblock %}
        </div>
    </main>

    <script src="{% static 'main/highlight/highlight.min.js' %}"></script>
    <script>hljs.highlightAll();</script>

    <script>
        {% if category_title %}
            document.getElementById("a-{{ category_title }}").classList.add("a-current");
        {% else %}
            document.getElementById("a-{{ category_obj.title }}").classList.add("a-current");
        {% endif %}        
    </script>

    <footer>
        <div class="footer-links">
            <a href="/privacy">Cookies/Privacy/Datenschutz</a>
            <a href="/about">About</a>
        </div>
    </footer>
</body>
</html>