{% from "partials/icons.html" import github, book_open, hamburger, palette %}
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}Compose Farm{% endblock %}</title>

    <!-- daisyUI + Tailwind -->
    <link href="https://cdn.jsdelivr.net/npm/daisyui@5" data-vendor="daisyui.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" data-vendor="daisyui-themes.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4" data-vendor="tailwind.js"></script>

    <!-- xterm.js -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css" data-vendor="xterm.css">

    <!-- Custom styles -->
    <link rel="stylesheet" href="/static/app.css">

    <!-- Apply saved theme before render to prevent flash -->
    <script>
        (function() {
            const t = localStorage.getItem('cf_theme');
            if (t) document.documentElement.setAttribute('data-theme', t);
        })();
    </script>
</head>
<body class="min-h-screen bg-base-200">
    <div class="drawer lg:drawer-open">
        <input id="drawer-toggle" type="checkbox" class="drawer-toggle" />

        <!-- Main content -->
        <div class="drawer-content flex flex-col">
            <!-- Mobile navbar with hamburger -->
            <header class="navbar bg-base-100 border-b border-base-300 lg:hidden">
                <label for="drawer-toggle" class="btn btn-ghost btn-square">
                    {{ hamburger() }}
                </label>
                <span class="font-semibold rainbow-hover">Compose Farm</span>
            </header>

            <main id="main-content" class="flex-1 p-6">
                {% block content %}{% endblock %}
            </main>
        </div>

        <!-- Sidebar -->
        <div class="drawer-side">
            <label for="drawer-toggle" class="drawer-overlay" aria-label="close sidebar"></label>
            <aside id="sidebar" class="w-64 bg-base-100 border-r border-base-300 flex flex-col min-h-screen">
                <header class="p-4 border-b border-base-300">
                    <h2 class="text-lg font-semibold flex items-center gap-2">
                        <span class="rainbow-hover">Compose Farm</span>
                        <a href="https://compose-farm.nijho.lt/" target="_blank" title="Docs" class="opacity-50 hover:opacity-100 transition-opacity">
                            {{ book_open() }}
                        </a>
                        <a href="https://github.com/basnijholt/compose-farm" target="_blank" title="GitHub" class="opacity-50 hover:opacity-100 transition-opacity">
                            {{ github() }}
                        </a>
                        <button type="button" id="theme-btn" class="opacity-50 hover:opacity-100 transition-opacity cursor-pointer" title="Change theme (opens command palette)">
                            {{ palette() }}
                        </button>
                    </h2>
                </header>
                <nav class="flex-1 overflow-y-auto p-2" hx-get="/partials/sidebar" hx-trigger="load, cf:refresh from:body" hx-swap="innerHTML">
                    <span class="loading loading-spinner loading-sm"></span> Loading...
                </nav>
            </aside>
        </div>
    </div>

    <!-- Command Palette -->
    {% include "partials/command_palette.html" %}

    <!-- Scripts - HTMX first -->
    <script src="https://unpkg.com/htmx.org@2.0.4" data-vendor="htmx.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.js" data-vendor="xterm.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.js" data-vendor="xterm-fit.js"></script>
    <script src="/static/app.js"></script>
    {% block scripts %}{% endblock %}
</body>
</html>
