{% load static %}
{% load compress %}

<!doctype html>

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    {% compress css %}
        <link rel="stylesheet" href="{% static 'css/output.css' %}">
    {% endcompress %}

    <title>{% block title %}{% endblock %}</title>

    <link rel="stylesheet"
          href="https://unpkg.com/highlightjs@9.16.2/styles/a11y-dark.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
</head>

<body>

<nav class="bg-white border-gray-200 px-2 sm:px-4 py-2.5 rounded-r-full dark:bg-gray-900 bg-opacity-5 w-11/12 backdrop-filter backdrop-blur-md">
    <div class="flex flex-wrap items-center justify-between w-full">
        <div class="hidden w-full md:block md:w-auto" id="navbar-default">
            <ul class="text-2xl flex flex-col p-4 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:font-medium md:border-0 bg-opacity-0">
                <li>
                    <a href="/"
                       class="block py-2 pl-3 pr-4 text-white rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-gray-300 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Home</a>
                </li>
                <li>
                    <a href="/about"
                       class="block py-2 pl-3 pr-4 text-white rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-gray-300 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">About</a>
                </li>
                <li>
                    <a href="/problems"
                       class="block py-2 pl-3 pr-4 text-white rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-gray-300 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Problems</a>
                </li>
                {% if user.is_authenticated %}
                    <li>
                        <a href="/profile"
                           class="block py-2 pl-3 pr-4 text-white rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-gray-300 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Profile</a>
                    </li>

                {% endif %}

                {% if user.is_superuser %}
                    <li>
                        <a href="/admin"
                           class="block py-2 pl-3 pr-4 text-white rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-gray-300 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Admin</a>
                    </li>

                {% endif %}
            </ul>
        </div>
        <ul class="rounded text-2xl flex flex-col p-4 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row space-x-8 mt-0 md:font-medium border-0 bg-opacity-0">
            {% if user.is_authenticated %}
                <p style="color:#61d23b">
                    Hi {{ user.username }}
                </p>
                <li>
                    <a href="/signout"
                       class="block py-2 pl-3 pr-4 text-white rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-gray-300 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Log
                        Out</a>
                </li>
            {% else %}
                <li>
                    <a href="/signin"
                       class="block py-2 pl-3 pr-4 text-white rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-gray-300 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Log
                        In</a>
                </li>

                <li>
                    <a href="/signup"
                       class="block py-2 pl-3 pr-4 text-white rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-gray-300 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Sign
                        Up</a>
                </li>
            {% endif %}


        </ul>
    </div>
</nav>

<script src="https://unpkg.com/flowbite@1.5.3/dist/flowbite.js"></script>

</body>

<div>
    {% block content %}
    {% endblock %}
</div>
</html>

