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