<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Orient Editor</title>

    <link href="/web/static/css/style.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
</head>

<body
    class="bg-slate-50 dark:bg-slate-950 container flex flex-col justify-between max-w-screen-lg min-h-screen mx-auto text-slate-900 dark:text-slate-100">
    <header class="my-8">
        <h1 class="font-bold text-4xl text-center">Orient Editor</h1>

        <div class="ml-4">
            <label class="cursor-pointer flex items-center relative" for="theme-toggle">
                <div class="bg-slate-200 dark:bg-slate-800 block h-6 w-12 rounded-full"></div>
                <div
                    class="absolute bg-slate-800 dark:bg-slate-50 dot left-1 top-1 h-4 w-4 rounded-full transform transition">
                </div>
                <span class="ml-2">Dunkel</span>
            </label>
            <input type="checkbox" id="theme-toggle" class="sr-only">
        </div>
    </header>

    <main class="mx-4">
        <div class="hidden bg-slate-950 dark:bg-slate-50 fixed font-bold p-4 right-8 rounded-lg shadow-lg text-slate-100 dark:text-slate-900 top-8 z-50"
            id="notification">
        </div>

        <div id="page-content">
            {{template "page-content" .}}
        </div>
    </main>

    <footer class="text-center text-gray-500 my-8">
        <p>&copy; 2024 Jason Streifling. Alle Rechte vorbehalten.</p>
        <p>v0.13.0 - <strong>Alpha: Drastische Ă„nderungen und Fehler vorbehalten.</strong></p>
    </footer>

    <script src="https://unpkg.com/htmx.org@2.0.2"></script>
    <script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const toggleSwitch = document.getElementById('theme-toggle');
            const dot = document.querySelector('.dot');

            if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
                document.documentElement.classList.add('dark')
                toggleSwitch.checked = true;
                dot.classList.add('translate-x-6');
            } else {
                document.documentElement.classList.remove('dark')
            }

            toggleSwitch.addEventListener('change', () => {
                if (toggleSwitch.checked) {
                    document.documentElement.classList.add('dark');
                    localStorage.theme = 'dark';
                    dot.classList.add('translate-x-6');
                } else {
                    document.documentElement.classList.remove('dark');
                    localStorage.theme = 'light';
                    dot.classList.remove('translate-x-6');
                }
            });
        });
    </script>
    <script>
        htmx.on('htmx:responseError', function (event) {
            var notification = document.getElementById('notification');
            notification.innerText = event.detail.xhr.responseText;
            notification.classList.remove('hidden');
            setTimeout(function () {
                notification.classList.add('hidden');
            }, 5000);
        });
    </script>
</body>

</html>