<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{% block title %}Deep Research System{% endblock %}</title>
    <link rel="icon" type="image/png" href="/static/favicon.png">
    <!-- Vite HMR for development -->
    {{ vite_hmr() }}

    <!-- Load all vendor dependencies and styles through Vite -->
    {{ vite_asset('js/app.js') }}

    <!-- Keep local styles that aren't in npm packages -->
    <link rel="stylesheet" href="/static/css/styles.css">
    <link rel="stylesheet" href="/static/css/mobile-navigation.css">
    <link rel="stylesheet" href="/static/css/mobile-responsive.css">

    <!-- Force hide sidebar on mobile with inline CSS for highest priority -->
    <style>
        @media (max-width: 767px) {
            /* Absolutely hide the desktop sidebar on mobile */
            .ldr-sidebar:not(.active),
            aside.ldr-sidebar:not(.active),
            .ldr-app-container > aside {
                display: none !important;
                visibility: hidden !important;
                width: 0 !important;
                height: 0 !important;
                position: absolute !important;
                left: -9999px !important;
            }

            /* Ensure app container doesn't use flex on mobile */
            .ldr-app-container {
                display: block !important;
            }

            /* Main content takes full width */
            .ldr-main-content {
                margin-left: 0 !important;
                width: 100% !important;
            }
        }
    </style>

    {% block extra_head %}{% endblock %}
</head>
<body>
    <div class="ldr-app-container">
        <!-- Sidebar -->
        {% include 'components/sidebar.html' %}

        <!-- Main Content -->
        <main class="ldr-main-content">
            {% if session.username %}
            <div class="ldr-top-bar">
                <div class="ldr-top-bar-right">
                    <div class="ldr-user-menu">
                        <span class="ldr-user-info">
                            <i class="fas fa-user"></i> {{ session.username }}
                        </span>
                        <form action="{{ url_for('auth.logout') }}" method="POST" class="ldr-logout-form" id="logout-form" style="display: inline;">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                            <a href="#" class="ldr-logout-btn" onclick="event.preventDefault(); document.getElementById('logout-form').submit(); return false;">
                                <i class="fas fa-sign-out-alt"></i> Logout
                            </a>
                        </form>
                    </div>
                </div>
            </div>
            {% endif %}

            {% block content %}{% endblock %}

            <!-- Collapsible Log Panel is included in specific pages -->
        </main>
    </div>

    <!-- Mobile Tab Bar -->
    {# Mobile navigation now handled dynamically by mobile-navigation.js #}
    {# {% include 'components/mobile_nav.html' %} #}

    <!-- Common Templates -->
    {% block templates %}{% endblock %}

    <!-- Scripts -->

    <!-- URL Configuration (must load first) -->
    <script src="/static/js/config/urls.js"></script>

    <!-- Logo click handler -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const logoLink = document.getElementById('logo-link');
            if (logoLink) {
                logoLink.addEventListener('click', function() {
                    window.location.href = '/';
                });
            }
        });
    </script>

    <!-- All vendor libraries are now loaded through Vite in the <head> section -->

    <!-- Core JS -->
    <script src="/static/js/services/formatting.js"></script>
    <script src="/static/js/services/ui.js"></script>
    <script src="/static/js/services/api.js"></script>
    <script src="/static/js/services/socket.js"></script>
    <script src="/static/js/services/keyboard.js"></script>

    <!-- Security Utilities -->
    <script src="/static/js/security/xss-protection.js"></script>

    <!-- Shared Components -->
    <script src="/static/js/components/logpanel.js"></script>

    <!-- Page-specific Components -->
    {% block component_scripts %}{% endblock %}

    <!-- Page-specific JS -->
    {% block page_scripts %}{% endblock %}

    <script>
        // Configure marked to not use eval
        if (typeof marked !== 'undefined') {
            marked.setOptions({
                headerIds: false,
                mangle: false,
                smartypants: false
            });
        }

        // Configure html2canvas to avoid using eval if possible
        if (typeof html2canvas !== 'undefined') {
            window.html2canvas_noSandbox = true;
        }
    </script>

    <script src="/static/js/components/settings_sync.js"></script>

    <!-- Mobile Navigation -->
    <script src="/static/js/security/url-validator.js"></script>
    <script src="/static/js/mobile-navigation.js"></script>
</body>
</html>
