<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}VibeX Observability{% endblock %}</title>

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="/static/logo.png">
    <link rel="shortcut icon" type="image/png" href="/static/logo.png">

    <!-- TailwindCSS + Preline UI v3.1.0 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/preline@3.1.0/dist/preline.min.js"></script>

    <!-- HTMX v2.0.4 -->
    <script src="https://unpkg.com/htmx.org@2.0.4"></script>

    <!-- Lucide Icons -->
    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>

    <!-- Custom styles -->
    <style>
        /* HTMX indicators */
        .htmx-indicator {
            opacity: 0;
            transition: opacity 500ms ease-in;
        }
        .htmx-request .htmx-indicator {
            opacity: 1;
        }
        .htmx-request.htmx-indicator {
            opacity: 1;
        }

        /* Custom scrollbar for better UX */
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: rgb(243 244 246);
            border-radius: 3px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: rgb(156 163 175);
            border-radius: 3px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: rgb(107 114 128);
        }

        /* Dark mode scrollbar */
        .dark .custom-scrollbar::-webkit-scrollbar-track {
            background: rgb(64 64 64);
        }
        .dark .custom-scrollbar::-webkit-scrollbar-thumb {
            background: rgb(115 115 115);
        }
        .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: rgb(163 163 163);
        }

        /* Toast animations */
        @keyframes slide-in-right {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
        .animate-slide-in-right {
            animation: slide-in-right 0.3s ease-out;
        }

        /* Modal fallback styles */
        #project-path-modal {
            backdrop-filter: blur(4px);
            z-index: 9999 !important;
        }
        #project-path-modal.hidden {
            display: none !important;
        }

        /* Ensure modal is above sidebar */
        #project-path-modal > div {
            z-index: 10000;
        }

        /* Modal input styling */
        #project-path-modal input[type="text"] {
            padding: 8px 12px;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            width: 100%;
        }

        #project-path-modal input[type="text"]:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
    </style>
</head>
<body class="bg-gray-50 dark:bg-neutral-900">
    <!-- Navigation -->
    <header class="sticky top-0 inset-x-0 flex flex-wrap md:justify-start md:flex-nowrap z-[48] w-full bg-white border-b text-sm py-2.5 lg:ps-[260px] dark:bg-neutral-800 dark:border-neutral-700">
        <nav class="px-4 sm:px-6 flex basis-full items-center w-full mx-auto">
            <!-- Logo -->
            <div class="me-5 lg:me-0 lg:hidden">
                <a href="/" class="flex items-center text-xl font-bold text-gray-800 hover:text-gray-600 dark:text-white dark:hover:text-neutral-300 transition-colors">
                    <img src="/static/logo.png" alt="VibeX" class="w-6 h-6 mr-2">
                    VibeX
                </a>
            </div>

            <!-- End -->
            <div class="w-full flex items-center justify-end ms-auto md:justify-between gap-x-1 md:gap-x-3">
                <div class="hidden md:block">
                    <!-- Search -->
                    <div class="relative">
                        <div class="absolute inset-y-0 start-0 flex items-center pointer-events-none z-20 ps-3.5">
                            <i data-lucide="search" class="shrink-0 size-4 text-gray-400 dark:text-white/60"></i>
                        </div>
                        <input type="text" class="py-2 ps-10 pe-16 block w-full bg-white border-gray-200 rounded-lg text-sm focus:outline-none focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder:text-neutral-400 dark:focus:ring-neutral-600" placeholder="Search">
                    </div>
                </div>

                <div class="flex flex-row items-center justify-end gap-1">
                    <!-- Project Path Selector -->
                    <button type="button" onclick="openProjectPathModal()" class="size-[38px] relative inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" title="Change Project Path">
                        <i data-lucide="folder" class="shrink-0 size-4"></i>
                        <span class="sr-only">Change Project Path</span>
                    </button>

                    <!-- Theme Toggle -->
                    <button type="button" data-hs-theme-switch class="size-[38px] relative inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
                        <i data-lucide="sun" class="shrink-0 size-4 dark:hidden"></i>
                        <i data-lucide="moon" class="shrink-0 size-4 hidden dark:block"></i>
                        <span class="sr-only">Toggle theme</span>
                    </button>

                    <!-- Status Indicator -->
                    <div class="relative">
                        <button type="button" class="size-[38px] relative inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
                            <i data-lucide="activity" class="shrink-0 size-4"></i>
                        </button>
                        <span id="status-indicator" class="absolute top-0 end-0 inline-flex items-center py-0.5 px-1.5 rounded-full text-xs font-medium transform -translate-y-1/2 translate-x-1/2 bg-green-500 text-white"></span>
                    </div>
                </div>
            </div>
        </nav>
    </header>

    <!-- Sidebar -->
    <div class="hs-overlay [--auto-close:lg] hs-overlay-open:translate-x-0 -translate-x-full transition-all duration-300 transform w-[260px] h-full hidden fixed inset-y-0 start-0 z-[60] bg-white border-e border-gray-200 lg:block lg:translate-x-0 lg:end-auto lg:bottom-0 dark:bg-neutral-800 dark:border-neutral-700">
        <div class="relative flex flex-col h-full max-h-full">
            <div class="px-6 pt-4">
                <!-- Logo -->
                <a href="/" class="flex items-center text-xl font-bold text-gray-800 dark:text-white">
                    <img src="/static/logo.png" alt="VibeX" class="w-6 h-6 mr-2">
                    VibeX <span class="text-sm text-gray-400 ml-2">O11y</span>
                </a>
            </div>

            <!-- Content -->
            <div class="h-full overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500">
                <nav class="hs-accordion-group p-3 w-full flex flex-col flex-wrap" data-hs-accordion-always-open>
                    <ul class="flex flex-col space-y-1">
                        <li>
                            <a class="flex items-center gap-x-2 py-2 px-2.5 {% if page_title == 'Dashboard' %}bg-gray-100 dark:bg-neutral-700{% endif %} text-sm text-gray-800 rounded-lg hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-200 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" href="/">
                                <i data-lucide="layout-dashboard" class="shrink-0 size-4"></i>
                                Dashboard
                            </a>
                        </li>
                        <li>
                            <a class="flex items-center gap-x-2 py-2 px-2.5 {% if page_title == 'Tasks' %}bg-gray-100 dark:bg-neutral-700{% endif %} text-sm text-gray-800 rounded-lg hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-200 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" href="/tasks">
                                <i data-lucide="list-checks" class="shrink-0 size-4"></i>
                                Tasks
                            </a>
                        </li>
                        <li>
                            <a class="flex items-center gap-x-2 py-2 px-2.5 {% if page_title == 'Events' %}bg-gray-100 dark:bg-neutral-700{% endif %} text-sm text-gray-800 rounded-lg hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-200 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" href="/events">
                                <i data-lucide="zap" class="shrink-0 size-4"></i>
                                Events
                            </a>
                        </li>
                        <li>
                            <a class="flex items-center gap-x-2 py-2 px-2.5 {% if page_title == 'Artifacts' %}bg-gray-100 dark:bg-neutral-700{% endif %} text-sm text-gray-800 rounded-lg hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-200 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" href="/artifacts">
                                <i data-lucide="folder-open" class="shrink-0 size-4"></i>
                                Artifacts
                            </a>
                        </li>
                                                  <li>
                             <a class="flex items-center gap-x-2 py-2 px-2.5 {% if page_title == 'Messages' %}bg-gray-100 dark:bg-neutral-700{% endif %} text-sm text-gray-800 rounded-lg hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-200 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" href="/messages">
                                  <i data-lucide="message-square" class="shrink-0 size-4"></i>
                                  Messages
                              </a>
                          </li>
                        <li>
                            <a class="flex items-center gap-x-2 py-2 px-2.5 {% if page_title == 'Configuration' %}bg-gray-100 dark:bg-neutral-700{% endif %} text-sm text-gray-800 rounded-lg hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-200 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" href="/configuration">
                                <i data-lucide="settings" class="shrink-0 size-4"></i>
                                Configuration
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <!-- Main content -->
    <div class="w-full lg:ps-64">
        <div class="p-4 sm:p-6 space-y-4 sm:space-y-6">
            {% block content %}{% endblock %}
        </div>
    </div>

    <!-- Toast notifications -->
    <div id="toast-container" class="fixed top-4 end-4 z-50 space-y-3"></div>

    <!-- Loading overlay -->
    <div id="loading-overlay" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white dark:bg-neutral-800 p-6 rounded-lg shadow-xl">
            <div class="flex items-center space-x-3">
                <div class="animate-spin inline-block size-6 border-[3px] border-current border-t-transparent text-blue-600 rounded-full" role="status" aria-label="loading">
                    <span class="sr-only">Loading...</span>
                </div>
                <span class="text-gray-800 dark:text-white">Loading...</span>
            </div>
        </div>
    </div>

    <!-- Project Path Modal -->
    <div id="project-path-modal" class="hidden fixed inset-0 z-[9999] overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true" style="z-index: 9999 !important;">
        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center">
            <!-- Background overlay -->
            <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity" aria-hidden="true" onclick="closeProjectPathModal()" style="z-index: 9998;"></div>

            <!-- Modal panel -->
            <div class="relative inline-block align-middle bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all max-w-lg w-full mx-4 dark:bg-gray-800" style="z-index: 10000;">
                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 dark:bg-gray-800">
                    <div class="sm:flex sm:items-start">
                        <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10 dark:bg-blue-900">
                            <i data-lucide="folder" class="h-6 w-6 text-blue-600 dark:text-blue-400"></i>
                        </div>
                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                            <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white" id="modal-title">
                                Change Project Path
                            </h3>
                            <div class="mt-2">
                                <p class="text-sm text-gray-500 dark:text-gray-400">
                                    Set the path to your VibeX project directory containing taskspace/ and config/ folders
                                </p>
                            </div>

                            <div class="mt-4">
                                <!-- Current Project Path -->
                                <div class="mb-4 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Current Project Path:</label>
                                    <code id="current-project-path" class="text-sm text-gray-800 dark:text-gray-200">{{ config_data.project_path or '.' }}</code>
                                </div>

                                <!-- New Project Path Input -->
                                <div class="mb-4">
                                    <label for="new-project-path" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">New Project Path:</label>
                                    <input type="text" id="new-project-path" name="new-project-path"
                                           class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                                           placeholder="/path/to/your/vibex/project"
                                           value="{{ config_data.project_path or '.' }}">
                                </div>

                                <!-- Project Structure Info -->
                                <div class="mb-4 p-3 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700 rounded-lg">
                                    <div class="flex">
                                        <i data-lucide="info" class="flex-shrink-0 w-4 h-4 text-blue-600 mt-0.5"></i>
                                        <div class="ml-3">
                                            <h4 class="text-sm font-medium text-blue-800 dark:text-blue-400">Expected Structure:</h4>
                                            <div class="mt-1 text-xs text-blue-700 dark:text-blue-300">
                                                <div>📁 project-path/</div>
                                                <div>&nbsp;&nbsp;├── 📁 taskspace/ (data files)</div>
                                                <div>&nbsp;&nbsp;└── 📁 config/ (configuration files)</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse dark:bg-gray-700">
                    <button type="button" onclick="changeProjectPath()"
                            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
                        <i data-lucide="folder" class="w-4 h-4 mr-2"></i>
                        Change Path
                    </button>
                    <button type="button" onclick="closeProjectPathModal()"
                            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700">
                        Cancel
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Preline UI v3.1.0 -->
    <script src="https://cdn.jsdelivr.net/npm/preline@3.1.0/dist/preline.min.js"></script>

    <!-- Preline UI theme initialization (must run after Preline is loaded) -->
    <script>
        // This code should be added to <head>. It's used to prevent page load glitches.
        const html = document.querySelector('html');

        // Set default theme if none exists
        if (!localStorage.getItem('hs_theme')) {
            localStorage.setItem('hs_theme', 'light');
        }

        const isLightOrAuto = localStorage.getItem('hs_theme') === 'light' || (localStorage.getItem('hs_theme') === 'auto' && !window.matchMedia('(prefers-color-scheme: dark)').matches);
        const isDarkOrAuto = localStorage.getItem('hs_theme') === 'dark' || (localStorage.getItem('hs_theme') === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches);

        if (isLightOrAuto && html.classList.contains('dark')) html.classList.remove('dark');
        else if (isDarkOrAuto && html.classList.contains('light')) html.classList.remove('light');
        else if (isDarkOrAuto && !html.classList.contains('dark')) html.classList.add('dark');
        else if (isLightOrAuto && !html.classList.contains('light')) html.classList.add('light');
    </script>

    <script>
        // Initialize components when DOM is ready
        document.addEventListener('DOMContentLoaded', function() {
            console.log('DOM loaded, initializing components...');

            // Initialize Lucide icons
            if (window.lucide) {
                lucide.createIcons();
                console.log('Lucide icons initialized');
            }

            // Try to initialize Preline components if available
            if (window.HSStaticMethods) {
                try {
                    window.HSStaticMethods.autoInit();
                    console.log('Preline UI components initialized');
                } catch (error) {
                    console.log('Preline UI initialization failed, using fallback:', error);
                }
            } else {
                console.log('Preline UI not available, using basic functionality');
            }
        });

        // Re-initialize after page fully loads
        window.addEventListener('load', function() {
            console.log('Page fully loaded, re-initializing...');

            // Re-initialize Lucide icons
            if (window.lucide) {
                lucide.createIcons();
            }

            // Try to initialize theme switching if available
            if (window.HSStaticMethods) {
                try {
                    window.HSStaticMethods.autoInit();
                } catch (error) {
                    console.log('Preline UI re-initialization failed:', error);
                }
            }
        });



        // Toast notification system
        function showToast(message, type = 'info') {
            const toast = document.createElement('div');
            const bgColor = type === 'success' ? 'bg-green-500' : type === 'error' ? 'bg-red-500' : 'bg-blue-500';
            const iconName = type === 'success' ? 'check-circle' : type === 'error' ? 'x-circle' : 'info';

            toast.className = `${bgColor} text-white px-4 py-3 rounded-lg shadow-lg mb-2 flex items-center gap-2 animate-slide-in-right`;
            toast.innerHTML = `
                <i data-lucide="${iconName}" class="shrink-0 size-4"></i>
                <span class="text-sm font-medium">${message}</span>
                <button onclick="this.parentElement.remove()" class="ml-auto">
                    <i data-lucide="x" class="shrink-0 size-4 hover:bg-black/20 rounded p-0.5"></i>
                </button>
            `;

            document.getElementById('toast-container').appendChild(toast);
            lucide.createIcons();

            // Auto remove after 5 seconds
            setTimeout(() => {
                if (toast.parentElement) {
                    toast.remove();
                }
            }, 5000);
        }

        // HTMX event handlers
        document.body.addEventListener('htmx:beforeRequest', function(evt) {
            document.getElementById('loading-overlay').classList.remove('hidden');
        });

        document.body.addEventListener('htmx:afterRequest', function(evt) {
            document.getElementById('loading-overlay').classList.add('hidden');

            if (evt.detail.successful) {
                // Re-initialize Lucide icons after HTMX updates
                lucide.createIcons();
            } else {
                showToast('Request failed', 'error');
            }
        });

        // Auto-refresh dashboard stats every 30 seconds
        setInterval(function() {
            if (window.location.pathname === '/') {
                htmx.trigger('#dashboard-stats', 'refresh');
            }
        }, 30000);

        // Status indicator updates
        function updateStatusIndicator(isRunning, isIntegrated) {
            const indicator = document.getElementById('status-indicator');
            if (isRunning && isIntegrated) {
                indicator.className = 'absolute top-0 end-0 inline-flex items-center py-0.5 px-1.5 rounded-full text-xs font-medium transform -translate-y-1/2 translate-x-1/2 bg-green-500 text-white';
            } else if (isRunning) {
                indicator.className = 'absolute top-0 end-0 inline-flex items-center py-0.5 px-1.5 rounded-full text-xs font-medium transform -translate-y-1/2 translate-x-1/2 bg-yellow-500 text-white';
            } else {
                indicator.className = 'absolute top-0 end-0 inline-flex items-center py-0.5 px-1.5 rounded-full text-xs font-medium transform -translate-y-1/2 translate-x-1/2 bg-red-500 text-white';
            }
        }

        // Project Path Management Functions
        function openProjectPathModal() {
            console.log('Opening project path modal...');
            const modal = document.getElementById('project-path-modal');
            if (!modal) {
                console.error('Modal element not found!');
                return;
            }

            console.log('Modal element found, removing hidden class...');
            modal.classList.remove('hidden');
            document.body.style.overflow = 'hidden';

            // Re-initialize Lucide icons in the modal
            setTimeout(() => {
                if (window.lucide) {
                    lucide.createIcons();
                }
                console.log('Modal should be visible now');
            }, 100);
        }

        function closeProjectPathModal() {
            const modal = document.getElementById('project-path-modal');
            modal.classList.add('hidden');
            document.body.style.overflow = '';
        }

        // Close modal on Escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                const modal = document.getElementById('project-path-modal');
                if (!modal.classList.contains('hidden')) {
                    closeProjectPathModal();
                }
            }
        });

        function changeProjectPath() {
            console.log('changeProjectPath called');
            const newPath = document.getElementById('new-project-path').value.trim();
            console.log('New path:', newPath);

            if (!newPath) {
                showToast('Please enter a valid project path', 'error');
                return;
            }

            if (confirm('Changing the project path will restart the monitor. Continue?')) {
                console.log('User confirmed path change');
                // Show loading state
                const button = event.target;
                const originalText = button.innerHTML;
                button.disabled = true;
                button.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 mr-2 animate-spin"></i>Changing...';
                lucide.createIcons();

                fetch('/api/project/change', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ path: newPath })
                })
                .then(response => {
                    console.log('Response status:', response.status);
                    return response.json();
                })
                .then(data => {
                    console.log('Response data:', data);
                    if (data.success) {
                        showToast('Project path changed successfully. Reloading...', 'success');
                        closeProjectPathModal();
                        setTimeout(() => {
                            window.location.reload();
                        }, 2000);
                    } else {
                        showToast(data.error || 'Failed to change project path', 'error');
                        button.disabled = false;
                        button.innerHTML = originalText;
                        lucide.createIcons();
                    }
                })
                .catch(error => {
                    console.error('Error changing project path:', error);
                    showToast('Failed to change project path: ' + error.message, 'error');
                    button.disabled = false;
                    button.innerHTML = originalText;
                    lucide.createIcons();
                });
            }
        }

        function copyToClipboard(text) {
            navigator.clipboard.writeText(text).then(function() {
                showToast('Path copied to clipboard', 'success');
            }).catch(function(err) {
                showToast('Failed to copy path', 'error');
            });
        }

        // Test functionality after initialization
        setTimeout(() => {
            // Test toast notification after everything is loaded
            showToast('VibeX Observability Platform loaded successfully!', 'success');
        }, 2000);
    </script>

    {% block scripts %}{% endblock %}
</body>
</html>
