<!DOCTYPE html>
<html lang="de" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Kurier — Dashboard</title>
    <!-- Tailwind via CDN (JIT compiler, required for utility classes).
         Note: This makes a request to cdn.tailwindcss.com on each page load.
         For offline use, pre-build CSS with: npx tailwindcss -o static/styles.css -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- HTMX served locally — no external request -->
    <script src="/dashboard/static/htmx.min.js"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        arkiv: {
                            50: '#eff6ff',
                            100: '#dbeafe',
                            500: '#3b82f6',
                            600: '#2563eb',
                            700: '#1d4ed8',
                            800: '#1e3a5f',
                            900: '#0f172a',
                            950: '#020617',
                        }
                    }
                }
            }
        }
    </script>
    <style>
        .htmx-indicator { display: none; }
        .htmx-request .htmx-indicator { display: inline-block; }
        .htmx-request.htmx-indicator { display: inline-block; }
        .fade-in { animation: fadeIn 0.2s ease-in; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
        .drop-active { border-color: #3b82f6 !important; background-color: #eff6ff !important; }
    </style>
</head>
<body class="h-full bg-arkiv-950 text-gray-100">
    <!-- Nav -->
    <nav class="bg-arkiv-900 border-b border-arkiv-800 px-6 py-4">
        <div class="max-w-6xl mx-auto flex items-center justify-between">
            <div class="flex items-center gap-3">
                <div class="w-8 h-8 bg-arkiv-500 rounded-lg flex items-center justify-center font-bold text-white text-sm">L</div>
                <h1 class="text-xl font-semibold text-white">Kurier</h1>
                <span class="text-xs text-gray-500 bg-arkiv-800 px-2 py-0.5 rounded">{{ version }}</span>
            </div>
            <div class="flex items-center gap-4 text-sm text-gray-400">
                <a href="/docs" target="_blank" class="hover:text-white transition">API Docs</a>
                <a href="https://github.com/HerrStolzier/lotse" target="_blank" class="hover:text-white transition">GitHub</a>
            </div>
        </div>
    </nav>

    <!-- Main content -->
    <main class="max-w-6xl mx-auto px-6 py-8 space-y-8">
        {% block content %}{% endblock %}
    </main>
</body>
</html>
