{% load django_htmx %}
<!DOCTYPE html>
<html lang="en">
    {% load static %}
    <head>
        <meta charset="utf-8" />
        <meta name="description" content="Self-hosted time-tracker." />
        <meta name="keywords" content="time, tracking, video games, self-hosted" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Timetracker -
            {% block title %}
                Untitled
            {% endblock title %}
        </title>
        <script src="{% static 'js/htmx.min.js' %}"></script>
        {% django_htmx_script %}
        <link rel="stylesheet" href="{% static 'base.css' %}" />
        <script src="https://cdn.jsdelivr.net/npm/flowbite@2.4.1/dist/flowbite.min.js"></script>
        <script>
        // On page load or when changing themes, best to add inline in `head` to avoid FOUC
            if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
                document.documentElement.classList.add('dark');
            } else {
                document.documentElement.classList.remove('dark')
            }
        </script>
    </head>
    <body hx-indicator="#indicator">
        <img id="indicator"
             src="{% static 'icons/loading.png' %}"
             class="absolute right-3 top-3 animate-spin htmx-indicator"
             height="24"
             width="24"
             alt="loading indicator" />
        <div class="flex flex-col min-h-screen">
            {% include "navbar.html" %}
            <div class="flex flex-1 flex-col dark:bg-gray-800 pt-8">
                {% block content %}
                    No content here.
                {% endblock content %}
            </div>
            {% load version %}
            <span class="fixed left-2 bottom-2 text-xs text-slate-300 dark:text-slate-600">{% version %} ({% version_date %})</span>
        </div>
        {% block scripts %}
        {% endblock scripts %}
        <script>
            var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
            var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');

        // Change the icons inside the button based on previous settings
            if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
                themeToggleLightIcon.classList.remove('hidden');
            } else {
                themeToggleDarkIcon.classList.remove('hidden');
            }

            var themeToggleBtn = document.getElementById('theme-toggle');

            themeToggleBtn.addEventListener('click', function () {

            // toggle icons inside button
                themeToggleDarkIcon.classList.toggle('hidden');
                themeToggleLightIcon.classList.toggle('hidden');

            // if set via local storage previously
                if (localStorage.getItem('color-theme')) {
                    if (localStorage.getItem('color-theme') === 'light') {
                        document.documentElement.classList.add('dark');
                        localStorage.setItem('color-theme', 'dark');
                    } else {
                        document.documentElement.classList.remove('dark');
                        localStorage.setItem('color-theme', 'light');
                    }

                // if NOT set via local storage previously
                } else {
                    if (document.documentElement.classList.contains('dark')) {
                        document.documentElement.classList.remove('dark');
                        localStorage.setItem('color-theme', 'light');
                    } else {
                        document.documentElement.classList.add('dark');
                        localStorage.setItem('color-theme', 'dark');
                    }
                }

            });
        </script>
    </body>
</html>