<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{title}</title>
    {css_content}

    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"
            onload="window.markitectMarkedLoaded = true"
            onerror="window.markitectMarkedError = true"></script>
</head>
<body class="{mode_class}">

    <div id="markdown-content"></div>

    <!-- Configuration Data Interface - ONLY place where Python data enters JavaScript -->
    <script id="markitect-config" type="application/json">{config_json}</script>

    <!-- Pure Static JavaScript Components - Embedded inline to avoid path issues -->
    <script>
        {js_config_loader}
    </script>
    <script>
        {js_debug_system}
    </script>
    <script>
        {js_section_manager}
    </script>
    <script>
        {js_debug_panel}
    </script>
    <script>
        {js_document_controls}
    </script>
    <script>
        {js_dom_renderer}
    </script>
    <script>
        {js_control_base}
    </script>
    <script>
        {js_contents_control}
    </script>
    <script>
        {js_status_control}
    </script>
    <script>
        {js_debug_control}
    </script>
    <script>
        {js_edit_control}
    </script>
    <script>
        {js_main}
    </script>

    <!-- Initialization Script -->
    <script>
        // Clean initialization - no Python-generated code!
        document.addEventListener('DOMContentLoaded', function() {
            console.log('🎯 DOM loaded, starting Markitect initialization...');

            // Wait for configuration to be ready before initializing
            if (window.markitectConfig) {
                window.markitectConfig.waitForReady(function() {
                    console.log('🎯 Configuration ready, initializing ' + window.markitectConfig.mode + ' mode...');

                    // Initialize edit/insert capabilities
                    if (window.markitectConfig.isEditMode || window.markitectConfig.isInsertMode) {
                        try {
                            console.log('🚀 Initializing clean ' + window.markitectConfig.mode + ' capabilities...');

                            // Initialize main application
                            if (typeof MarkitectMain !== 'undefined' && MarkitectMain.initialize) {
                                MarkitectMain.initialize();
                            }

                            console.log('✅ Clean ' + window.markitectConfig.mode + ' mode active - click any section to edit');
                        } catch (error) {
                            console.error('❌ Clean ' + window.markitectConfig.mode + ' mode failed to initialize:', error);
                        }
                    }
                });
            } else {
                console.error('❌ Configuration system not available');
            }

            // Check if modular components are being used for content rendering
            if (typeof SectionManager !== 'undefined') {
                console.log('✓ Modular components detected - using modular architecture');
                return;
            }

            // Fallback content rendering if modular components failed
            const contentDiv = document.getElementById('markdown-content');
            if (contentDiv) {
                if (typeof marked !== 'undefined') {
                    try {
                        const html = marked.parse(window.markitectConfig.markdownContentWithDogtag);
                        const htmlWithTargetBlank = html.replace(/<a href="([^"]*)"([^>]*)>/g, '<a href="$1" target="_blank"$2>');
                        contentDiv.innerHTML = htmlWithTargetBlank;
                        console.log('✓ Content rendered successfully with fallback');
                    } catch (error) {
                        contentDiv.innerHTML = '<p>Error rendering markdown: ' + error.message + '</p>';
                        console.error('Content rendering failed:', error.message);
                    }
                } else {
                    // Basic fallback without marked.js
                    const fallbackHtml = window.markitectConfig.markdownContent
                        .replace(/^# (.*$)/gim, '<h1>$1</h1>')
                        .replace(/^## (.*$)/gim, '<h2>$1</h2>')
                        .replace(/^### (.*$)/gim, '<h3>$1</h3>')
                        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
                        .replace(/\*(.*?)\*/g, '<em>$1</em>')
                        .replace(/\n\n/g, '<br><br>')
                        .replace(/\n/g, '<br>');
                    contentDiv.innerHTML = '<div style="white-space: pre-wrap;">' + fallbackHtml + '</div>';
                    console.warn('Content rendered with basic fallback parser');
                }
            }
        });

        window.addEventListener('load', function() {
            if (window.markitectMarkedError) {
                console.error('CDN library failed to load - network or firewall blocking marked.js');
            }
        });
    </script>
</body>
</html>