<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>anyprompt</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@700&family=JetBrains+Mono:wght@400;700&display=swap">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
            --card-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
            --glow-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
        }

        body {
            font-family: 'Inter', sans-serif;
            background: #121212;
            min-height: 100vh;
            overflow-x: hidden;
        }
        
        .logo {
            font-family: 'JetBrains Mono', monospace;
            font-weight: bold;
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: var(--glow-shadow);
            letter-spacing: -1px;
        }
        
        .prompt-card {
            background: rgba(30, 41, 59, 0.7);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(99, 102, 241, 0.2);
            border-radius: 16px;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
            overflow: hidden;
        }
        
        .prompt-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--primary-gradient);
            z-index: 1;
        }
        
        pre {
            font-family: 'JetBrains Mono', monospace;
            white-space: pre-wrap;
            word-wrap: break-word;
            font-size: 0.875rem;
        }
        
        .code-block {
            max-height: 400px;
            overflow-y: auto;
            background-color: rgba(15, 23, 42, 0.8);
            color: #e2e8f0;
            border-radius: 12px;
            padding: 1.25rem;
            border: 1px solid rgba(99, 102, 241, 0.2);
            scrollbar-width: thin;
            scrollbar-color: rgba(99, 102, 241, 0.5) rgba(15, 23, 42, 0.8);
        }
        
        .code-block::-webkit-scrollbar {
            width: 8px;
        }
        
        .code-block::-webkit-scrollbar-track {
            background: rgba(15, 23, 42, 0.8);
            border-radius: 12px;
        }
        
        .code-block::-webkit-scrollbar-thumb {
            background: rgba(99, 102, 241, 0.5);
            border-radius: 12px;
        }
        
        /* Custom button styling */
        .btn {
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
            z-index: 1;
        }
        
        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--primary-gradient);
            opacity: 0;
            z-index: -1;
            transition: opacity 0.3s ease;
        }
        
        .btn:hover::before {
            opacity: 1;
        }
        
        /* Toggle switch styling */
        .toggle-checkbox:checked {
            right: 0;
            border-color: #8B5CF6;
            background-color: #6366F1;
        }
        
        .toggle-checkbox:checked + .toggle-label {
            background: var(--primary-gradient);
        }
        
        /* Loading animation */
        .loader {
            border-top-color: #6366F1;
            box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
            -webkit-animation: spinner 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
            animation: spinner 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
        }
        
        @-webkit-keyframes spinner {
            0% { -webkit-transform: rotate(0deg); }
            100% { -webkit-transform: rotate(360deg); }
        }
        
        @keyframes spinner {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* Tab styling */
        .tab-btn {
            position: relative;
            transition: all 0.3s ease;
        }
        
        .tab-btn.active::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 2px;
            background: var(--primary-gradient);
        }
        
        /* Particle background */
        .particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            pointer-events: none;
        }
        
        /* Floating elements */
        .floating {
            animation: floating 3s ease-in-out infinite;
        }
        
        @keyframes floating {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
        
        /* Glow effects */
        .glow {
            box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
        }
        
        /* Stats counter */
        .stat-counter {
            font-family: 'JetBrains Mono', monospace;
            font-weight: bold;
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        /* Method badge styling */
        .method-badge {
            position: relative;
            overflow: hidden;
            font-family: 'JetBrains Mono', monospace;
            font-weight: bold;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }
        
        /* Timeline styling */
        .timeline-line {
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            width: 2px;
            background: var(--primary-gradient);
            transform: translateX(-50%);
        }
        
        /* Tooltip styling */
        .tooltip {
            position: relative;
        }
        
        .tooltip:hover::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            padding: 0.5rem;
            background: rgba(15, 23, 42, 0.9);
            color: white;
            border-radius: 0.375rem;
            font-size: 0.75rem;
            white-space: nowrap;
            z-index: 10;
        }
        
        /* Response styling */
        .response-indicator, .no-response-indicator {
            padding: 0.75rem;
            border-radius: 0.5rem;
            margin-bottom: 1rem;
        }
        
        .response-indicator {
            background-color: rgba(16, 185, 129, 0.1);
            border: 1px solid rgba(16, 185, 129, 0.2);
        }
        
        .no-response-indicator {
            background-color: rgba(245, 158, 11, 0.1);
            border: 1px solid rgba(245, 158, 11, 0.2);
        }
    </style>
</head>
<body class="text-gray-100 transition-colors duration-500">
    <!-- Particle background -->
    <div class="particles" id="particles-js"></div>
    
    <!-- Main container -->
    <div class="container mx-auto px-4 py-8 relative">
        <!-- Decorative elements -->
        <div class="absolute top-14 left-10 w-24 h-24 bg-purple-500 rounded-full filter blur-3xl opacity-10 animate-pulse"></div>
        
        <!-- Header -->
        <header class="relative z-10 flex flex-col md:flex-row justify-between items-center mb-16 py-6">
            <div class="flex items-center mb-6 md:mb-0 w-1/2">
                <div class="mr-4">
                    <svg class="w-10 h-10" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="url(#header-gradient)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M2 17L12 22L22 17" stroke="url(#header-gradient)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M2 12L12 17L22 12" stroke="url(#header-gradient)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <defs>
                            <linearGradient id="header-gradient" x1="2" y1="2" x2="22" y2="22" gradientUnits="userSpaceOnUse">
                                <stop stop-color="#6366F1"/>
                                <stop offset="1" stop-color="#8B5CF6"/>
                            </linearGradient>
                        </defs>
                    </svg>
                </div>
                <div>
                    <h1 class="text-4xl md:text-5xl mb-1">anyprompt</h1>
                    <p class="text-indigo-300 text-sm">Track and visualize prompts & responses</p>
                </div>
            </div>
            
            <!-- Stats section moved to center -->
            <div class="w-1/2 flex justify-end">
                <div class="flex justify-center items-center space-x-6">
                    <div class="px-6 py-3 rounded-xl bg-indigo-900/30 backdrop-blur-sm">
                        <div class="text-center">
                            <p class="stat-counter text-4xl mb-1" id="promptCount">0</p>
                            <p class="text-xs text-indigo-300 uppercase tracking-wider">requests</p>
                        </div>
                    </div>
                    <div class="px-6 py-3 rounded-xl bg-green-900/30 backdrop-blur-sm">
                        <div class="text-center">
                            <p class="stat-counter text-4xl mb-1" id="responseCount">0</p>
                            <p class="text-xs text-indigo-300 uppercase tracking-wider">responses</p>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- Search and filter bar -->
        <div class="relative z-10 mb-6">
            <div class="flex justify-center">
                <div class="relative w-full">
                    <div class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none">
                        <svg class="w-5 h-5 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                    </div>
                    <input type="text" id="searchInput" placeholder="Search..." 
                           class="w-full pl-12 pr-4 py-3 bg-transparent rounded-xl 
                                  text-gray-100 placeholder-gray-500 focus:outline-none">
                </div>
            </div>
        </div>

        <!-- Prompts Container -->
        <div id="promptsContainer" class="relative grid grid-cols-1 gap-8 z-10">
            <!-- No prompts message (hidden by default) -->
            <div id="noPromptsMessage" class="hidden animate__animated animate__fadeIn">
                <div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-indigo-900/40 to-purple-900/40 backdrop-blur-md border p-10 text-center">
                    <div class="absolute top-0 right-0 -mt-10 -mr-10 w-40 h-40 bg-purple-500 rounded-full filter blur-3xl opacity-10"></div>
                    <div class="absolute bottom-0 left-0 -mb-10 -ml-10 w-40 h-40 bg-indigo-500 rounded-full filter blur-3xl opacity-10"></div>
                    
                    <svg class="mx-auto h-24 w-24 text-indigo-400 opacity-80 mb-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
                    </svg>
                    
                    <h3 class="text-2xl font-bold text-white mb-3">No prompts captured yet</h3>
                    <p class="text-indigo-300 text-lg mb-8 max-w-2xl mx-auto">
                        Start making API calls to LLM services and watch as anyprompt automatically captures and visualizes your conversations.
                    </p>
                    
                    <div class="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
                        <div class="bg-indigo-900/50 rounded-xl p-6 backdrop-blur-sm border border-indigo-800/50">
                            <h4 class="text-lg font-semibold text-white mb-3 flex items-center">
                                <svg class="w-5 h-5 mr-2 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
                                </svg>
                                Quick Example
                            </h4>
                            <pre class="text-sm text-indigo-200 text-left"><code>from openai import OpenAI
import anyprompt

client = OpenAI()
response = client.chat.completions.create(
    model="gpt-4o-mini",
    messages=[{"role": "user", "content": "Hello, world!"}]
)</code></pre>
                        </div>
                        
                        <div class="bg-indigo-900/50 rounded-xl p-6 backdrop-blur-sm border border-indigo-800/50">
                            <h4 class="text-lg font-semibold text-white mb-3 flex items-center">
                                <svg class="w-5 h-5 mr-2 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                Supported APIs
                            </h4>
                            <ul class="text-left text-indigo-200 space-y-2">
                                <li class="flex items-center">
                                    <svg class="w-4 h-4 mr-2 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                    OpenAI (GPT models)
                                </li>
                                <li class="flex items-center">
                                    <svg class="w-4 h-4 mr-2 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                    Anthropic (Claude models)
                                </li>
                                <li class="flex items-center">
                                    <svg class="w-4 h-4 mr-2 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                    And many more!
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <template id="promptCardTemplate">
        <div class="prompt-card animate__animated animate__fadeIn relative">
            <div class="p-6">
                <div class="flex flex-col md:flex-row justify-between items-start mb-4">
                    <div class="mb-3 md:mb-0 cursor-pointer prompt-header" onclick="togglePromptContent(this)">
                        <div class="flex items-center">
                            <div class="method-badge px-3 py-1 text-xs font-semibold rounded-md mr-3 prompt-method"></div>
                            <h3 class="text-xl font-medium text-white prompt-url"></h3>
                        </div>
                        <div class="flex items-center mt-2 text-sm text-indigo-300">
                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            <span class="prompt-timestamp"></span>
                        </div>
                    </div>
                    <button class="show-prompt-btn bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-lg transition-all duration-300 flex items-center shadow-lg hover:shadow-xl transform ml-auto">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                        </svg>
                        View Details
                    </button>
                </div>
                <div class="prompt-content hidden">
                    <div class="flex flex-grow w-full">
                        <div class="mt-4 w-full">
                            <div class="json-content mt-4 w-full">
                                <div class="tabs flex border-b border-gray-200 dark:border-gray-700 mb-4">
                                    <button class="tab-btn active px-4 py-2 text-sm font-medium" data-tab="body">Body</button>
                                    <button class="tab-btn px-4 py-2 text-sm font-medium response-tab-btn" data-tab="response">Response</button>
                                    <button class="tab-btn px-4 py-2 text-sm font-medium" data-tab="full">Full</button>
                                </div>
                                <div class="tab-content" data-tab="body">
                                    <pre class="code-block"><code class="prompt-body"></code></pre>
                                </div>
                                <div class="tab-content hidden" data-tab="response">
                                    <pre class="code-block"><code class="prompt-response"></code></pre>
                                </div>
                                <div class="tab-content hidden" data-tab="full">
                                    <pre class="code-block"><code class="prompt-full"></code></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Dark mode toggle
            const htmlEl = document.documentElement;
            
            // Check for dark mode preference
            if (localStorage.getItem('darkMode') === 'true' || 
                (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
                htmlEl.classList.add('dark');
            }

            // Fetch prompts
            fetchPrompts();

            // Setup auto-refresh
            setInterval(fetchPrompts, 5000); // Refresh every 5 seconds
        });

        function togglePromptContent(element) {
            const card = element.closest('.prompt-card');
            const content = card.querySelector('.prompt-content');
            const showBtn = card.querySelector('.show-prompt-btn');
            
            content.classList.toggle('hidden');
            
            // Update button text based on content visibility
            if (content.classList.contains('hidden')) {
                showBtn.innerHTML = `
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                    </svg>
                    View Details
                `;
            } else {
                showBtn.innerHTML = `
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                    Hide Details
                `;
            }
        }

        function fetchPrompts() {
            fetch('/api/prompts')
                .then(response => response.json())
                .then(data => {
                    renderPrompts(data.prompts);
                })
                .catch(error => {
                    console.error('Error fetching prompts:', error);
                })
                .finally(() => {
                    
                });
        }

        function clearPrompts() {
            fetch('/api/prompts', {
                method: 'DELETE'
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    renderPrompts([]);
                }
            })
            .catch(error => {
                console.error('Error clearing prompts:', error);
            });
        }

        function filterPrompts() {
            const searchTerm = document.getElementById('searchInput').value.toLowerCase();
            const promptCards = document.querySelectorAll('.prompt-card');
            
            promptCards.forEach(card => {
                if (card.innerHTML.toLowerCase().includes(searchTerm)) {
                    card.style.display = 'block';
                } else {
                    card.style.display = 'none';
                }
            });
        }

        // Add event listener for the search input
        document.getElementById('searchInput').addEventListener('input', filterPrompts);

        // Store the previous prompts for comparison
        let previousPrompts = [];
        
        function renderPrompts(prompts) {
            const container = document.getElementById('promptsContainer');
            const noPromptsMessage = document.getElementById('noPromptsMessage');
            
            document.getElementById('promptCount').textContent = prompts.length;
            
            // Count responses
            const responseCount = prompts.filter(p => p.has_response).length;
            document.getElementById('responseCount').textContent = responseCount;

            // Check if the prompts are the same as the previous render
            if (JSON.stringify(prompts) === JSON.stringify(previousPrompts)) {
                return; // Skip rendering if prompts haven't changed
            }
            
            // Update previous prompts
            previousPrompts = JSON.parse(JSON.stringify(prompts));
            
            // Clear previous content (except loading indicator and no prompts message)
            Array.from(container.children).forEach(child => {
                if (!child.id || (child.id !== 'loadingIndicator' && child.id !== 'noPromptsMessage')) {
                    container.removeChild(child);
                }
            });
            
            if (prompts.length === 0) {
                noPromptsMessage.classList.remove('hidden');
                return;
            }
            
            noPromptsMessage.classList.add('hidden');
            
            // Reverse to show newest first
            prompts.reverse().forEach((prompt, index) => {
                const promptCard = createPromptCard(prompt, index === 0); // Only open the first one by default
                container.appendChild(promptCard);
            });

            // Add event listeners to show buttons
            document.querySelectorAll('.show-prompt-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const card = this.closest('.prompt-card');
                    const content = card.querySelector('.prompt-content');
                    
                    // Toggle content visibility
                    content.classList.toggle('hidden');
                    
                    // Update button text based on content visibility
                    if (content.classList.contains('hidden')) {
                        this.innerHTML = `
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                            </svg>
                            View Details
                        `;
                    } else {
                        this.innerHTML = `
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                            Hide Details
                        `;
                    }
                });
            });

            // Add event listeners to tab buttons
            document.querySelectorAll('.tab-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const tabName = this.getAttribute('data-tab');
                    const card = this.closest('.prompt-card');
                    
                    // Update active tab
                    card.querySelectorAll('.tab-btn').forEach(tb => {
                        tb.classList.remove('active', 'text-indigo-600', 'dark:text-indigo-400', 'border-b-2', 'border-indigo-600', 'dark:border-indigo-400');
                        tb.classList.add('text-gray-500', 'dark:text-gray-400');
                    });
                    this.classList.add('active', 'text-indigo-600', 'dark:text-indigo-400', 'border-b-2', 'border-indigo-600', 'dark:border-indigo-400');
                    this.classList.remove('text-gray-500', 'dark:text-gray-400');
                    
                    // Show selected tab content
                    card.querySelectorAll('.tab-content').forEach(tc => {
                        tc.classList.add('hidden');
                    });
                    card.querySelector(`.tab-content[data-tab="${tabName}"]`).classList.remove('hidden');
                });
            });
        }

        function createPromptCard(prompt, isFirst) {
            const template = document.getElementById('promptCardTemplate');
            const card = template.content.cloneNode(true);
            
            // Format the URL to keep it compact
            let displayUrl = prompt.url;
            try {
                const url = new URL(prompt.url);
                displayUrl = url.origin + url.pathname;
                if (displayUrl.length > 60) {
                    displayUrl = displayUrl.substring(0, 57) + '...';
                }
            } catch (e) {
                // In case URL parsing fails, use the original URL
            }
            
            card.querySelector('.prompt-url').textContent = displayUrl;
            
            // Format timestamp
            let timestamp = "Unknown time";
            if (prompt.timestamp) {
                try {
                    const date = new Date(prompt.timestamp);
                    timestamp = date.toLocaleString();
                } catch (e) {
                    // Use default
                }
            }
            card.querySelector('.prompt-timestamp').textContent = timestamp;
            
            // Set method with appropriate color
            const methodSpan = card.querySelector('.prompt-method');
            methodSpan.textContent = prompt.method;
            switch (prompt.method.toUpperCase()) {
                case 'GET':
                    methodSpan.classList.add('bg-green-100', 'text-green-800', 'dark:bg-green-900', 'dark:text-green-200');
                    break;
                case 'POST':
                    methodSpan.classList.add('bg-blue-100', 'text-blue-800', 'dark:bg-blue-900', 'dark:text-blue-200');
                    break;
                case 'PUT':
                    methodSpan.classList.add('bg-yellow-100', 'text-yellow-800', 'dark:bg-yellow-900', 'dark:text-yellow-200');
                    break;
                case 'DELETE':
                    methodSpan.classList.add('bg-red-100', 'text-red-800', 'dark:bg-red-900', 'dark:text-red-200');
                    break;
                default:
                    methodSpan.classList.add('bg-gray-100', 'text-gray-800', 'dark:bg-gray-700', 'dark:text-gray-200');
            }
            
            // Handle response tab visibility
            const responseTabBtn = card.querySelector('.response-tab-btn');
            
            // Check if this is a standalone response (has type field)
            if (prompt.type === 'standalone_response') {
                // Hide response tab for standalone responses
                responseTabBtn.classList.add('hidden');
            } else {
                // Show or hide response indicators based on whether there's a response
                if (prompt.has_response && prompt.response) {
                    // Format response timestamp if available
                    if (prompt.response.timestamp) {
                        try {
                            const responseDate = new Date(prompt.response.timestamp);
                        } catch (e) {
                            // Use default
                        }
                    }
                    
                    // Add response badge to method span (visually indicate requests with responses)
                    const methodContainer = card.querySelector('.prompt-method').parentNode;
                    const responseBadge = document.createElement('div');
                    responseBadge.className = 'ml-2 px-2 py-0.5 text-xs font-semibold rounded-md bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
                    responseBadge.textContent = 'Response';
                    methodContainer.appendChild(responseBadge);
                }
            }
            
            // Show content for the first card by default
            if (isFirst) {
                card.querySelector('.prompt-content').classList.remove('hidden');
                card.querySelector('.show-prompt-btn').innerHTML = `
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                    Hide Details
                `;
            }
            
            // Format JSON body
            try {
                let body = prompt.body;
                
                // Try to parse as JSON if it's a string
                if (typeof body === 'string') {
                    try {
                        body = JSON.parse(body);
                    } catch (e) {
                        // Keep it as a string if parsing fails
                    }
                }
                
                // Pretty print the body
                const formattedBody = JSON.stringify(body, null, 2);
                card.querySelector('.prompt-body').textContent = formattedBody;
                
                // Process response data if available
                if (prompt.has_response && prompt.response) {
                    let responseBody = prompt.response.body;
                    
                    // Try to parse as JSON if it's a string
                    if (typeof responseBody === 'string') {
                        try {
                            responseBody = JSON.parse(responseBody);
                        } catch (e) {
                            // Keep it as a string if parsing fails
                        }
                    }
                    
                    // Pretty print the response
                    const formattedResponse = JSON.stringify(responseBody, null, 2);
                    card.querySelector('.prompt-response').textContent = formattedResponse;
                } else {
                    card.querySelector('.prompt-response').textContent = "No response data available";
                }
                
                // Full data
                card.querySelector('.prompt-full').textContent = JSON.stringify(prompt, null, 2);
            } catch (e) {
                card.querySelector('.prompt-body').textContent = "Error formatting content: " + e.message;
                card.querySelector('.prompt-response').textContent = "Error formatting response: " + e.message;
                card.querySelector('.prompt-full').textContent = "Error formatting full data";
            }
            
            return card.firstElementChild;
        }
    </script>
</body>
</html> 