{% 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 'css/fonts.css' %}">
    <link rel="stylesheet" href="{% static '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 }} - {{ category_title }}</title>
    {% else %}
        <title>TealCode</title>
    {% endif %}
</head>
<body>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-9M4H60DMBG"></script>
    <div id="cookie_banner">
        <p>We only use non-technical cookies for analysis purposes.<br> Do you want to accept those cookies? (please)</p>
        <button onclick='document.cookie = "cookies_allowed=1;path=/";window.location.reload();'>Accept</button>
    </div>


    <script>
        
        cookies_allowed = document.cookie.split("cookies_allowed=")[1][0]
        console.log(cookies_allowed)

        if(cookies_allowed == null){
            document.cookie = "cookies_allowed=0;path=/";
            cookies_allowed = document.cookie.split("cookies_allowed=")[1]
        }
        if(cookies_allowed == "1"){
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());

            gtag('config', 'G-9M4H60DMBG');
            document.getElementById("cookie_banner").style.display = "none";
        }else if(cookies_allowed == "0"){
            console.log("DO NOT LOAD ANALYTILCS");
        }
        
        
        
    </script>


    <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>

        {% if user.is_authenticated %}
        <div id="header-admin">
            <a id="a-analytics" href="/analytics/">Analytics</a>
        </div>
        {% endif %}
    </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>