{% load static %}
{% url 'insights:insight_dashboard' as dashboard_url %}
<!doctype html>
<html id="html-root" lang="en" class="">
    <title>{{ app_name }} - Insights</title>
    <head>
        <meta charset="UTF-8" />
        <meta lang="en" />
        <meta keywords="{{ app_name }}, insights" />
        <meta description="{{ app_name }} - Insights" />
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="preconnect" href="https://fonts.bunny.net" />
        <link href="https://fonts.bunny.net/css?family=ubuntu:300,300i,400,400i,500,500i,700,700i"
              rel="stylesheet"/>
        <link rel="stylesheet" href="{% static 'insights/css/insights.css' %}" />
        <script src="{% static 'insights/js/preline.js' %}"></script>
        <script>
            function setCookie(theme) {
                document.cookie = `theme=${theme}; path=/; max-age=${60 * 60 * 24 * 14};`;
            }

            function getCookie (name) {
                let value = `; ${document.cookie}`;
                let parts = value.split(`; ${name}=`);
                if (parts.length === 2) return parts.pop().split(';').shift();
            }

            function darkMode(theme) {
                const element = document.getElementById('html-root')
                if(theme == 'light') {
                    element.classList.remove('dark')
                } else {
                    element.classList.add('dark')
                }
            }
            
            function toggleDarkMode() {
                const element = document.getElementById('html-root')
                if (element.classList.contains('dark')) {
                    element.classList.remove('dark');
                    return "light"
                } else {
                    element.classList.add('dark')
                    return "dark"
                }
            }

            const theme = getCookie('theme')
            darkMode(theme);
            
            document.addEventListener('DOMContentLoaded', function() {


                const button = document.querySelector("button");
                
                button.addEventListener("click", (event) => {
                    const theme = toggleDarkMode()
                    setCookie(theme)
                    window.location.reload()
                });
            });
        </script>
    </head>
    <body class="bg-background text-foreground dark:bg-foreground dark:text-background">
        <header class="z-50 flex flex-wrap w-full py-2 text-sm sm:justify-start sm:flex-nowrap">
            <nav class="w-full px-4 mx-auto sm:flex sm:items-center sm:justify-between">
                <button class="p-2 rounded-sm hover:bg-gray-100">
                    <svg xmlns="http://www.w3.org/2000/svg"
                         fill="none"
                         viewBox="0 0 24 24"
                         stroke-width="1.5"
                         stroke="currentColor"
                         class="w-4 h-4">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
                    </svg>
                </button>
            </nav>
        </header>
        <header class="z-50 flex flex-wrap w-full py-4 text-sm sm:justify-start sm:flex-nowrap">
            <nav class="max-w-[85rem] w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between"
                 aria-label="Home">
                <div class="flex items-center justify-between">
                    <a class="flex-none" href="{{ dashboard_url }}">
                        <span class="text-xl font-semibold text-primary-500">{{ app_name }}</span>
                        <span class="inline-block align-top dark:text-white">Insights</span>
                    </a>
                    <div class="sm:hidden">
                        <button type="button"
                                class="inline-flex items-center justify-center gap-2 p-2 text-sm font-medium text-gray-700 align-middle transition-all bg-white border rounded-md shadow-sm hs-collapse-toggle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600"
                                data-hs-collapse="#navbar-collapse-with-animation"
                                aria-controls="navbar-collapse-with-animation"
                                aria-label="Toggle navigation">
                            <svg class="w-4 h-4 hs-collapse-open:hidden"
                                 width="16"
                                 height="16"
                                 fill="currentColor"
                                 viewBox="0 0 16 16">
                                <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
                            </svg>
                            <svg class="hidden w-4 h-4 hs-collapse-open:block"
                                 width="16"
                                 height="16"
                                 fill="currentColor"
                                 viewBox="0 0 16 16">
                                <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
                            </svg>
                        </button>
                    </div>
                </div>
                <div id="navbar-collapse-with-animation"
                     class="hidden overflow-hidden transition-all duration-300 hs-collapse basis-full grow sm:block">
                    <div class="flex flex-col gap-5 mt-5 shrink sm:flex-row sm:items-center sm:justify-end sm:mt-0 sm:pl-5">
                        <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-background dark:hover:text-gray-500"
                           href="{{ dashboard_url }}">Dashboard</a>
                        {% for app in apps %}
                            {% url 'insights:insight_app' app_uuid=app.uuid as app_url %}
                            <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-background dark:hover:text-gray-500"
                               href="{{ app_url }}">{{ app.name }}</a>
                        {% endfor %}
                    </div>
                </div>
            </nav>
        </header>
        <div>
            {% block content %}
            {% endblock content %}
        </div>
    </body>
</html>
