<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PerfWatch - Performance Monitoring</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="{{ perfwatch_static_url }}js/dashboard.js"></script>
    <style>
        /* Custom scrollbar styles */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #1f2937;
        }

        ::-webkit-scrollbar-thumb {
            background: #4b5563;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #6b7280;
        }

        /* Tree node animations */
        .tree-node {
            animation: slideIn 0.2s ease-out;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(-10px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .tree-toggle {
            transition: transform 0.2s ease;
        }

        .tree-queries,
        .tree-children {
            transition: all 0.3s ease;
        }

        /* Drawer animation */
        #tree-drawer-content {
            transition: transform 0.3s ease-out;
        }

        /* Border blink animations for cards */
        @keyframes borderBlinkRed {
            0%, 100% {
                border-color: rgba(185, 28, 28, 0.5);
                box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
            }
            50% {
                border-color: rgba(220, 38, 38, 0.9);
                box-shadow: 0 0 15px 2px rgba(239, 68, 68, 0.4);
            }
        }

        @keyframes borderBlinkYellow {
            0%, 100% {
                border-color: rgba(161, 98, 7, 0.5);
                box-shadow: 0 0 0 0 rgba(234, 179, 8, 0);
            }
            50% {
                border-color: rgba(202, 138, 4, 0.9);
                box-shadow: 0 0 15px 2px rgba(234, 179, 8, 0.4);
            }
        }

        @keyframes borderBlinkGreen {
            0%, 100% {
                border-color: rgba(21, 128, 61, 0.5);
                box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
            }
            50% {
                border-color: rgba(22, 163, 74, 0.9);
                box-shadow: 0 0 15px 2px rgba(34, 197, 94, 0.4);
            }
        }

        @keyframes borderBlinkBlue {
            0%, 100% {
                border-color: rgba(29, 78, 216, 0.5);
                box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
            }
            50% {
                border-color: rgba(37, 99, 235, 0.9);
                box-shadow: 0 0 15px 2px rgba(59, 130, 246, 0.4);
            }
        }

        .border-blink-red {
            animation: borderBlinkRed 2s ease-in-out infinite;
        }

        .border-blink-yellow {
            animation: borderBlinkYellow 2s ease-in-out infinite;
        }

        .border-blink-green {
            animation: borderBlinkGreen 2s ease-in-out infinite;
        }

        .border-blink-blue {
            animation: borderBlinkBlue 2s ease-in-out infinite;
        }

        /* Stop animation on hover */
        .group:hover .border-blink-red,
        .group:hover .border-blink-yellow,
        .group:hover .border-blink-green,
        .group:hover .border-blink-blue {
            animation: none;
        }

        /* Gantt Chart Hover Styles */
        .gantt-bar:hover .bar-inner {
            transform: scaleY(1.15) !important;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5) !important;
        }

        .gantt-bar:hover .gantt-tooltip {
            opacity: 1 !important;
            visibility: visible !important;
        }

        .gantt-bar-wrapper {
            z-index: 10;
        }

        .gantt-bar:hover {
            z-index: 999 !important;
        }
    </style>
</head>

<body class="bg-gray-900 text-white min-h-screen">
    <!-- Navbar -->
    <nav class="fixed top-0 z-50 w-full bg-gray-800 border-b border-gray-700">
        <div class="px-3 py-3 lg:px-5 lg:pl-3">
            <div class="flex items-center justify-between">
                <div class="flex items-center justify-start">
                    <button id="sidebar-toggle"
                        class="inline-flex items-center p-2 text-sm text-gray-400 rounded-lg hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-600">
                        <i class="fas fa-bars text-lg"></i>
                    </button>
                    <div class="flex items-center ml-4">
                        <i class="fas fa-gauge-high text-xl text-blue-500 mr-2"></i>
                        <span class="text-xl font-semibold">PerfWatch</span>
                    </div>
                </div>
                <div class="flex items-center gap-4">
                    <!-- Profiling Toggle Button -->
                    <button id="profiling-toggle" class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors" title="Toggle Profiling">
                        <i class="fas fa-circle text-xs" id="profiling-status-icon"></i>
                        <span id="profiling-status-text">Loading...</span>
                    </button>
                    <div id="refresh-status" class="text-sm text-gray-400"></div>
                    <button id="refresh-now" class="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded-lg">
                        <i class="fas fa-sync-alt"></i>
                    </button>
                    <!-- Logout Button -->
                    <button id="logout-btn" class="flex items-center gap-2 px-3 py-1.5 bg-red-600 hover:bg-red-700 text-white rounded-lg text-sm font-medium transition-colors" title="Logout">
                        <i class="fas fa-sign-out-alt"></i>
                        <span>Logout</span>
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <!-- Sidebar -->
    <aside id="sidebar"
        class="fixed top-0 left-0 z-40 w-64 h-screen pt-16 transition-transform -translate-x-full bg-gray-800 border-r border-gray-700 sm:translate-x-0">
        <div class="h-full px-3 py-4 overflow-y-auto">
            <ul class="space-y-2 font-medium">
                <li>
                    <a href="#overview"
                        class="sidebar-link flex items-center p-2 text-gray-300 rounded-lg hover:bg-gray-700 group active">
                        <i class="fas fa-chart-line w-5 h-5"></i>
                        <span class="ml-3">Overview</span>
                    </a>
                </li>
                <li>
                    <a href="#history"
                        class="sidebar-link flex items-center p-2 text-gray-300 rounded-lg hover:bg-gray-700 group">
                        <i class="fas fa-history w-5 h-5"></i>
                        <span class="ml-3">History</span>
                    </a>
                </li>
                <li class="pt-4">
                    <div class="px-2 text-xs font-semibold text-gray-400 uppercase">Quick Filters</div>
                    <div class="mt-2 space-y-2">
                        <button
                            class="severity-filter w-full p-2 text-left text-gray-300 text-sm rounded-lg hover:bg-gray-700"
                            data-severity="all">
                            All APIs
                        </button>
                        <button
                            class="severity-filter w-full p-2 text-left text-red-400 text-sm rounded-lg hover:bg-gray-700"
                            data-severity="critical">
                            Critical Performance
                        </button>
                        <button
                            class="severity-filter w-full p-2 text-left text-yellow-400 text-sm rounded-lg hover:bg-gray-700"
                            data-severity="warning">
                            Warnings
                        </button>
                        <button
                            class="severity-filter w-full p-2 text-left text-green-400 text-sm rounded-lg hover:bg-gray-700"
                            data-severity="normal">
                            Normal
                        </button>
                    </div>
                </li>
            </ul>
        </div>
    </aside>

    <!-- Main content -->
    <div class="p-4 sm:ml-64 pt-20">
        <div id="overview-section">
            <!-- Stats Cards -->
            <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 mb-6">
                <!-- Critical APIs Card -->
                <div class="group relative p-6 rounded-xl bg-gradient-to-br from-red-900/40 to-red-800/20 border border-red-700/50 hover:border-red-600 transition-all duration-300 hover:shadow-xl hover:shadow-red-900/30 hover:-translate-y-1">
                    <div class="flex items-center">
                        <div class="inline-flex flex-shrink-0 items-center justify-center h-14 w-14 text-red-400 bg-red-900/50 rounded-xl shadow-lg group-hover:scale-110 transition-transform duration-300">
                            <i class="fas fa-exclamation-triangle text-xl"></i>
                        </div>
                        <div class="flex-1 min-w-0 ms-4">
                            <p class="text-sm font-medium text-red-300/80 uppercase tracking-wide">Critical APIs</p>
                            <p class="text-3xl font-bold text-red-400" id="critical-count">0</p>
                            <p class="text-xs text-red-400/60 mt-1" id="critical-percent">0% of total</p>
                        </div>
                    </div>
                    <div class="absolute inset-0 bg-gradient-to-br from-red-500/0 to-red-500/0 group-hover:from-red-500/5 group-hover:to-red-500/10 rounded-xl transition-all duration-300"></div>
                </div>
                
                <!-- Warning APIs Card -->
                <div class="group relative p-6 rounded-xl bg-gradient-to-br from-yellow-900/40 to-yellow-800/20 border border-yellow-700/50 hover:border-yellow-600 transition-all duration-300 hover:shadow-xl hover:shadow-yellow-900/30 hover:-translate-y-1">
                    <div class="flex items-center">
                        <div class="inline-flex flex-shrink-0 items-center justify-center h-14 w-14 text-yellow-400 bg-yellow-900/50 rounded-xl shadow-lg group-hover:scale-110 transition-transform duration-300">
                            <i class="fas fa-exclamation-circle text-xl"></i>
                        </div>
                        <div class="flex-1 min-w-0 ms-4">
                            <p class="text-sm font-medium text-yellow-300/80 uppercase tracking-wide">Warning APIs</p>
                            <p class="text-3xl font-bold text-yellow-400" id="warning-count">0</p>
                            <p class="text-xs text-yellow-400/60 mt-1" id="warning-percent">0% of total</p>
                        </div>
                    </div>
                    <div class="absolute inset-0 bg-gradient-to-br from-yellow-500/0 to-yellow-500/0 group-hover:from-yellow-500/5 group-hover:to-yellow-500/10 rounded-xl transition-all duration-300"></div>
                </div>
                
                <!-- Normal APIs Card -->
                <div class="group relative p-6 rounded-xl bg-gradient-to-br from-green-900/40 to-green-800/20 border border-green-700/50 hover:border-green-600 transition-all duration-300 hover:shadow-xl hover:shadow-green-900/30 hover:-translate-y-1">
                    <div class="flex items-center">
                        <div class="inline-flex flex-shrink-0 items-center justify-center h-14 w-14 text-green-400 bg-green-900/50 rounded-xl shadow-lg group-hover:scale-110 transition-transform duration-300">
                            <i class="fas fa-check-circle text-xl"></i>
                        </div>
                        <div class="flex-1 min-w-0 ms-4">
                            <p class="text-sm font-medium text-green-300/80 uppercase tracking-wide">Normal APIs</p>
                            <p class="text-3xl font-bold text-green-400" id="normal-count">0</p>
                            <p class="text-xs text-green-400/60 mt-1" id="normal-percent">0% of total</p>
                        </div>
                    </div>
                    <div class="absolute inset-0 bg-gradient-to-br from-green-500/0 to-green-500/0 group-hover:from-green-500/5 group-hover:to-green-500/10 rounded-xl transition-all duration-300"></div>
                </div>
                
                <!-- Total APIs Card -->
                <div class="group relative p-6 rounded-xl bg-gradient-to-br from-blue-900/40 to-blue-800/20 border border-blue-700/50 hover:border-blue-600 transition-all duration-300 hover:shadow-xl hover:shadow-blue-900/30 hover:-translate-y-1">
                    <div class="flex items-center">
                        <div class="inline-flex flex-shrink-0 items-center justify-center h-14 w-14 text-blue-400 bg-blue-900/50 rounded-xl shadow-lg group-hover:scale-110 transition-transform duration-300">
                            <i class="fas fa-globe text-xl"></i>
                        </div>
                        <div class="flex-1 min-w-0 ms-4">
                            <p class="text-sm font-medium text-blue-300/80 uppercase tracking-wide">Total APIs</p>
                            <p class="text-3xl font-bold text-blue-400" id="total-count">0</p>
                            <p class="text-xs text-blue-400/60 mt-1">Last 24 hours</p>
                        </div>
                    </div>
                    <div class="absolute inset-0 bg-gradient-to-br from-blue-500/0 to-blue-500/0 group-hover:from-blue-500/5 group-hover:to-blue-500/10 rounded-xl transition-all duration-300"></div>
                </div>
            </div>

            <!-- Top Slowest APIs -->
            <div class="mb-4 p-4 rounded-lg bg-gray-800 border border-gray-700">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-xl font-bold">Slowest APIs</h2>
                    <div class="flex items-center space-x-2">
                        <select id="page-size-filter"
                            class="bg-gray-700 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 border-gray-600"
                            onchange="changePageSize(this.value)">
                            <option value="10">10 per page</option>
                            <option value="20" selected>20 per page</option>
                            <option value="50">50 per page</option>
                            <option value="100">100 per page</option>
                        </select>
                        <select id="time-filter"
                            class="bg-gray-700 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 border-gray-600">
                            <option value="1h">Last Hour</option>
                            <option value="6h">Last 6 Hours</option>
                            <option value="24h" selected>Last 24 Hours</option>
                            <option value="7d">Last 7 Days</option>
                            <option value="30d">Last 30 Days</option>
                            <option value="custom">Custom Date Range</option>
                        </select>
                        <div id="custom-date-range" style="display: none;" class="flex items-center gap-2 ml-2">
                            <input type="datetime-local" id="start-date"
                                class="bg-gray-700 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 border-gray-600"
                                style="color-scheme: dark;">
                            <span class="text-gray-400">to</span>
                            <input type="datetime-local" id="end-date"
                                class="bg-gray-700 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 border-gray-600"
                                style="color-scheme: dark;">
                            <button id="apply-custom-date"
                                class="bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium py-2.5 px-4 rounded-lg">
                                Apply
                            </button>
                        </div>
                    </div>
                </div>
                <div class="relative overflow-x-auto">
                    <table class="w-full text-sm text-left text-gray-300">
                        <thead class="text-xs uppercase bg-gray-700">
                            <tr>
                                <th scope="col" class="px-6 py-3">Endpoint</th>
                                <th scope="col" class="px-6 py-3">Method</th>
                                <th scope="col" class="px-6 py-3">Response Time</th>
                                <th scope="col" class="px-6 py-3">DB Queries</th>
                                <th scope="col" class="px-6 py-3">Last Called</th>
                                <th scope="col" class="px-6 py-3">Severity</th>
                                <th scope="col" class="px-6 py-3">Actions</th>
                            </tr>
                        </thead>
                        <tbody id="api-list">
                            <!-- Dynamic content -->
                        </tbody>
                    </table>
                </div>
                <!-- Pagination Container -->
                <div id="pagination-container"></div>
            </div>
        </div>

        <div id="history-section" class="hidden">
            <!-- History content -->
            <div class="mb-4 p-4 rounded-lg bg-gray-800 border border-gray-700">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-xl font-bold">API History</h2>
                    <div class="flex items-center space-x-2">
                        <div class="flex">
                            <input type="text" id="endpoint-search" placeholder="Search endpoint..."
                                class="bg-gray-700 text-sm rounded-l-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 border-gray-600">
                            <button id="search-button"
                                class="px-4 py-2.5 bg-blue-600 text-white rounded-r-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="relative overflow-x-auto" id="history-list">
                    <!-- Dynamic content -->
                </div>
            </div>
        </div>
    </div>

    <!-- API Details Drawer (RIGHT SIDE) -->
    <div id="api-details-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 overflow-y-auto h-full w-full z-50">
        <div class="fixed right-0 top-0 h-full bg-gray-800 shadow-2xl transform transition-transform duration-300 translate-x-full overflow-y-auto"
            id="api-details-drawer-content" style="width: 85%; z-index: 10000;">
            <div class="h-full flex flex-col">
                <!-- Header -->
                <div
                    class="flex justify-between items-center p-5 border-b border-gray-700 bg-gray-800 sticky top-0 z-10">
                    <div>
                        <h3 class="text-2xl font-bold text-white">
                            <i class="fas fa-chart-line mr-2 text-blue-400"></i>API Performance Details
                        </h3>
                        <p class="text-sm text-gray-400 mt-1" id="api-subtitle"></p>
                    </div>
                    <button class="modal-close text-gray-400 hover:text-white transition-colors">
                        <i class="fas fa-times text-2xl"></i>
                    </button>
                </div>

                <!-- Content -->
                <div id="modal-content" class="flex-1 p-5 space-y-5 overflow-y-auto">
                    <!-- API Overview -->
                    <div
                        class="p-5 bg-gradient-to-br from-gray-700 to-gray-800 rounded-lg border border-gray-600 shadow-md">
                        <div class="grid grid-cols-2 lg:grid-cols-4 gap-5">
                            <div class="text-center p-3 bg-gray-900/50 rounded-lg">
                                <p class="text-xs text-gray-400 uppercase tracking-wider mb-1">Endpoint</p>
                                <p id="api-endpoint" class="font-mono text-sm font-semibold text-blue-300"></p>
                            </div>
                            <div class="text-center p-3 bg-gray-900/50 rounded-lg">
                                <p class="text-xs text-gray-400 uppercase tracking-wider mb-1">Method</p>
                                <p id="api-method" class="font-bold text-green-400"></p>
                            </div>
                            <div class="text-center p-3 bg-gray-900/50 rounded-lg">
                                <p class="text-xs text-gray-400 uppercase tracking-wider mb-1">Total Time</p>
                                <p id="api-total-time" class="font-bold text-lg text-yellow-400"></p>
                            </div>
                            <div class="text-center p-3 bg-gray-900/50 rounded-lg">
                                <p class="text-xs text-gray-400 uppercase tracking-wider mb-1">DB Queries</p>
                                <p id="api-query-count" class="font-bold text-lg text-purple-400"></p>
                            </div>
                        </div>
                    </div>

                    <!-- Timeline -->
                    <div
                        class="p-5 bg-gradient-to-br from-gray-700 to-gray-800 rounded-lg border border-gray-600 shadow-md">
                        <h4 class="font-bold text-lg mb-4 flex items-center text-white">
                            <i class="fas fa-clock mr-2 text-orange-400"></i>
                            Execution Timeline
                        </h4>
                        <div id="timeline" class="relative bg-gray-900 rounded-lg p-4"
                            style="min-height: 300px; max-height: 500px; overflow-y: auto;">
                            <!-- Dynamic content will be populated here -->
                        </div>
                    </div>

                    <!-- Function Details -->
                    <div
                        class="p-5 bg-gradient-to-br from-gray-700 to-gray-800 rounded-lg border border-gray-600 shadow-md">
                        <h4 class="font-bold text-lg mb-4 flex items-center text-white">
                            <i class="fas fa-code mr-2 text-green-400"></i>
                            Function Execution Details
                        </h4>
                        <div id="function-details" class="space-y-2 max-h-96 overflow-y-auto">
                            <!-- Dynamic content -->
                        </div>
                    </div>

                    <!-- Request/Response -->
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
                        <div
                            class="p-5 bg-gradient-to-br from-gray-700 to-gray-800 rounded-lg border border-gray-600 shadow-md">
                            <h4 class="font-bold text-lg mb-3 flex items-center text-white">
                                <i class="fas fa-arrow-up mr-2 text-blue-400"></i>
                                Request
                            </h4>
                            <div class="space-y-3">
                                <div>
                                    <p class="text-xs text-gray-400 uppercase tracking-wider mb-1">Headers</p>
                                    <pre id="request-headers"
                                        class="text-xs bg-gray-900 p-3 rounded overflow-auto max-h-32 border border-gray-700"></pre>
                                </div>
                                <div>
                                    <p class="text-xs text-gray-400 uppercase tracking-wider mb-1">Body</p>
                                    <pre id="request-body"
                                        class="text-xs bg-gray-900 p-3 rounded overflow-auto max-h-48 border border-gray-700"></pre>
                                </div>
                            </div>
                        </div>
                        <div
                            class="p-5 bg-gradient-to-br from-gray-700 to-gray-800 rounded-lg border border-gray-600 shadow-md">
                            <h4 class="font-bold text-lg mb-3 flex items-center text-white">
                                <i class="fas fa-arrow-down mr-2 text-green-400"></i>
                                Response
                            </h4>
                            <div class="space-y-3">
                                <div>
                                    <p class="text-xs text-gray-400 uppercase tracking-wider mb-1">Status</p>
                                    <p id="response-status" class="font-semibold text-green-300"></p>
                                </div>
                                <div>
                                    <p class="text-xs text-gray-400 uppercase tracking-wider mb-1">Headers</p>
                                    <pre id="response-headers"
                                        class="text-xs bg-gray-900 p-3 rounded overflow-auto max-h-32 border border-gray-700"></pre>
                                </div>
                                <div>
                                    <p class="text-xs text-gray-400 uppercase tracking-wider mb-1">Body</p>
                                    <pre id="response-body"
                                        class="text-xs bg-gray-900 p-3 rounded overflow-auto max-h-48 border border-gray-700"></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tree Structure Drawer (RIGHT SIDE) -->
    <div id="tree-drawer" class="hidden fixed inset-0 bg-black bg-opacity-50 overflow-y-auto h-full w-full"
        style="z-index: 9999;">
        <div class="fixed right-0 top-0 h-full bg-gray-800 shadow-2xl transform transition-transform duration-300 translate-x-full overflow-y-auto"
            id="tree-drawer-content" style="width: 85%; z-index: 10000;">
            <div class="h-full flex flex-col">
                <!-- Header -->
                <div class="flex justify-between items-center p-5 border-b border-gray-700">
                    <div>
                        <h3 class="text-xl font-bold">Execution Tree Structure</h3>
                        <p class="text-sm text-gray-400 mt-1" id="tree-endpoint-info"></p>
                    </div>
                    <button class="tree-drawer-close text-gray-400 hover:text-white">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>

                <!-- Tree Content -->
                <div class="flex-1 overflow-y-auto p-5">
                    <div id="tree-structure-content" class="space-y-2">
                        <!-- Dynamic tree content will be inserted here -->
                    </div>
                </div>

                <!-- Footer Stats -->
                <div class="border-t border-gray-700 p-4 bg-gray-900">
                    <div class="grid grid-cols-4 gap-4 text-center">
                        <div>
                            <div class="text-xs text-gray-400">Total Time</div>
                            <div class="text-lg font-bold" id="tree-total-time">0ms</div>
                        </div>
                        <div>
                            <div class="text-xs text-gray-400">Functions</div>
                            <div class="text-lg font-bold" id="tree-function-count">0</div>
                        </div>
                        <div>
                            <div class="text-xs text-gray-400">DB Queries</div>
                            <div class="text-lg font-bold" id="tree-query-count">0</div>
                        </div>
                        <div>
                            <div class="text-xs text-gray-400">Query Time</div>
                            <div class="text-lg font-bold" id="tree-query-time">0ms</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Memory Metrics Modal (Separate from Analysis) -->
    <div id="memory-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 flex justify-end"
        style="z-index: 9998;">
        <div id="memory-drawer-content"
            class="bg-gray-800 h-full shadow-2xl transform transition-transform duration-300 translate-x-full overflow-y-auto"
            style="width: 85%; z-index: 9999;">
            <!-- Content will be dynamically populated by showMemoryMetrics() -->
        </div>
    </div>

    <!-- Performance Analysis Modal (NEW!) -->
    <div id="analysis-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 flex justify-end"
        style="z-index: 9999;">
        <div id="analysis-drawer-content"
            class="bg-gray-800 h-full shadow-2xl transform transition-transform duration-300 translate-x-full overflow-y-auto"
            style="width: 85%; z-index: 10000;">
            <div class="h-full flex flex-col">
                <!-- Header -->
                <div
                    class="flex justify-between items-center p-5 border-b border-gray-700 bg-gradient-to-r from-orange-900 to-red-900">
                    <div>
                        <h3 class="text-xl font-bold flex items-center">
                            <i class="fas fa-search mr-2"></i>
                            Performance Analysis
                        </h3>
                        <p class="text-sm text-gray-300 mt-1" id="analysis-endpoint-info"></p>
                    </div>
                    <button class="text-gray-300 hover:text-white" onclick="closeAnalysisModal()">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>

                <!-- Stats Bar -->
                <div class="border-b border-gray-700 p-4 bg-gray-900">
                    <div class="grid grid-cols-2 gap-4 text-center">
                        <div>
                            <div class="text-xs text-gray-400">Total Time</div>
                            <div class="text-lg font-bold text-yellow-400" id="analysis-total-time">0ms</div>
                        </div>
                        <div>
                            <div class="text-xs text-gray-400">Severity</div>
                            <div class="text-lg font-bold" id="analysis-severity"></div>
                        </div>
                    </div>
                </div>

                <!-- Analysis Content -->
                <div class="flex-1 overflow-y-auto p-5">
                    <h4 class="font-bold text-lg mb-4 flex items-center text-white">
                        <i class="fas fa-exclamation-triangle mr-2 text-orange-400"></i>
                        Why is this slow?
                    </h4>
                    <div id="slow-reasons-content" class="space-y-3">
                        <!-- Dynamic slow reasons will be populated here -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>