<!DOCTYPE html>
<html lang="en" class="h-full" data-irdb-locale-fallback="{{ ui_locale_fallback|default('') }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token|default('') }}">
    <title>{% block title %}IRDB{% endblock %}</title>
    {# Dark-mode FOUC prevention: read localStorage before paint, set the class on <html>.
       Has to stay inline because the bundled app.js is `defer`red — runs after layout.
       The CSP nonce keeps this script eligible while `'unsafe-inline'` is dropped (F24). #}
    <script nonce="{{ csp_nonce }}">
        (function () {
            try {
                var stored = localStorage.getItem('irdb-theme');
                var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
                var theme = stored || (prefersDark ? 'dark' : 'light');
                if (theme === 'dark') {
                    document.documentElement.classList.add('dark');
                }
            } catch (e) {
                /* localStorage unavailable — accept default light theme */
            }
        })();
    </script>
    <link rel="stylesheet" href="/assets/app.css">
</head>
<body class="h-full bg-slate-50 text-slate-900 antialiased dark:bg-slate-950 dark:text-slate-100">
    {% block body %}
        {% if current_user %}
            {% include 'partials/topnav.twig' %}
            <div class="flex min-h-[calc(100vh-4rem)]">
                {% include 'partials/sidebar.twig' %}
                <main class="flex-1 px-6 py-8">
                    {% include 'partials/flash.twig' %}
                    {% block content %}{% endblock %}
                </main>
            </div>
        {% else %}
            <main class="min-h-screen">
                {% include 'partials/flash.twig' %}
                {% block guest_content %}{% endblock %}
            </main>
        {% endif %}
    {% endblock %}
    <script src="/assets/app.js" defer></script>
</body>
</html>
