{% load static %}
<!DOCTYPE html>
<html>
<head>
    <!-- Required META Tags-->
    <meta charset="utf-8"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

    <!-- Optional META Tags -->
    {% if keywords %}
        <meta name="keywords" content="TealFire, TealCode, Snippet, {{ keywords }}">
    {% else %}
        <meta name="keywords" content="TealFire, TealCode, Snippet, Java, JavaScript, C, C#, C++, Python">
    {% endif %}

    {% if description %}
        <meta name="description" content="TealCode - {{ description }}"/>
    {% else %}
        <meta name="description" content="TealCode - Your Code Snippet directory - Java, C, C#, C++, Python"/>
    {% endif %}
    
    <meta name="author" content="TealFire - TealCode">
    <meta http-equiv="refresh" content="1800">
	<!-- Title -->
	{% if title %}
        <title>TealCode - {{ title }}</title>
    {% else %}
        <title>TealCode</title>
    {% endif %}
	
    <!-- Links -->
    <link rel="icon" type="image/x-icon" href="{% static 'favicon.ico' %}">
    <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <link rel="stylesheet" href="{% static 'main/highlight/styles/atom-one-dark.min.css' %}">
    
    
    <!-- Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-PGM5LTFSMG"></script>
    <script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;ga('create', 'UA-213552250-1', {'storage': 'none',});ga('send', 'pageview');</script>
    <script async src='https://www.google-analytics.com/analytics.js'></script>
    <script src="{% static 'js/cookies.js' %}"></script>
    <!-- End Google Analytics -->
</head>
<body class="bg-dark">
    <header class="p-3 bg-dark text-white shadow">
        <div class="container">
            <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
                <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
                    <img height="40" src="{% static 'logo.png' %}" alt=""/>
                </a>
                <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
                    <li><a id="a-index" href="/" class="nav-link px-2 text-white">Categories</a></li>
                    <li><a id="a-java" href="/category/java/" class="nav-link px-2 text-white">Java</a></li>
                    <li><a id="a-python" href="/category/python/" class="nav-link px-2 text-white">Python</a></li>
                    <li><a id="a-c" href="/category/c/" class="nav-link px-2 text-white">C</a></li>
                    <li><a id="a-cs" href="/category/cs/" class="nav-link px-2 text-white">C#</a></li>
                    <li><a id="a-c++" href="/category/c++/" class="nav-link px-2 text-white">C++</a></li>
                </ul>
                <!--
                <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
                    <input type="search" class="form-control form-control-dark" placeholder="Search..." aria-label="Search">
                </form>     -->           
            </div>
        </div>
    </header>
    <main>
        {% block content %}{% endblock %}
    </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 class="py-3 my-4">
        <ul class="nav justify-content-center pb-3 mb-3">
          <li class="nav-item"><a id="a-privacy" href="/privacy/" class="nav-link px-2 text-muted">Cookies/Privacy/Datenschutz</a></li>
          <li class="nav-item"><a id="a-about"href="/about/" class="nav-link px-2 text-muted">About</a></li>
          <li class="nav-item"><a id="a-contact"href="/contact/" class="nav-link px-2 text-muted">Contact</a></li>
        </ul>
    </footer>


    <script>
        {% if current %}
            document.getElementById('a-{{ current }}').classList.add("current");
        {% else %}
            document.getElementById('a-index').classList.add("current");
        {% endif %}
    </script>
    <script src="{% static 'js/bootstrap.js' %}"></script>
</body>
</html>