<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}yarobot - YARA Rule Generator{% endblock %}</title>
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Highlight.js for code syntax -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
    
    <!-- Custom Styles -->
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .glass-effect {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .file-drop-zone {
            border: 2px dashed #cbd5e0;
            transition: all 0.3s ease;
        }
        
        .file-drop-zone.dragover {
            border-color: #667eea;
            background-color: rgba(102, 126, 234, 0.1);
        }
        
        .progress-bar {
            transition: width 0.3s ease;
        }
        
        .fade-in {
            animation: fadeIn 0.5s ease-in;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Light theme styles */
        [data-theme="light"] {
            --bg-primary: #ffffff;
            --bg-secondary: #f8fafc;
            --text-primary: #1e293b;
            --text-secondary: #64748b;
            --border-color: #e2e8f0;
        }

        /* Dark theme styles */
        [data-theme="dark"] {
            --bg-primary: #0f172a;
            --bg-secondary: #1e293b;
            --text-primary: #f8fafc;
            --text-secondary: #94a3b8;
            --border-color: #334155;
        }

        /* Apply theme variables */
        body {
            background-color: var(--bg-primary);
            color: var(--text-primary);
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .glass-effect {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        [data-theme="light"] .glass-effect {
            background: rgba(0, 0, 0, 0.05);
            border: 1px solid rgba(0, 0, 0, 0.1);
        }

        .file-drop-zone {
            border: 2px dashed var(--border-color);
        }

        [data-theme="light"] .file-drop-zone {
            border-color: #cbd5e0;
        }

        .text-gray-400 {
            color: var(--text-secondary);
        }

        .bg-gray-900 {
            background-color: var(--bg-primary);
        }

        .bg-gray-800 {
            background-color: var(--bg-secondary);
        }

        .border-gray-700 {
            border-color: var(--border-color);
        }
    </style>
</head>
<body class="min-h-screen">
    <!-- Navigation -->
    <nav class="glass-effect sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <i class="fas fa-shield-alt text-2xl text-blue-400"></i>
                    <h1 class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
                        yarobot
                    </h1>
                    <span class="text-sm text-gray-400">YARA Rule Generator</span>
                </div>
                
                <div class="flex items-center space-x-4">
                    <button onclick="toggleTheme()" class="flex items-center space-x-2 px-3 py-2 rounded-lg hover:bg-gray-800 transition-colors">
                        <i id="theme-icon" class="fas fa-moon"></i>
                        <span id="theme-text">Dark Mode</span>
                    </button>
                    <a href="#upload" class="hover:text-blue-400 transition-colors">
                        <i class="fas fa-upload mr-2"></i>Upload
                    </a>
                    <a href="#results" class="hover:text-blue-400 transition-colors">
                        <i class="fas fa-code mr-2"></i>Rules
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <main class="container mx-auto px-4 py-8">
        {% block content %}{% endblock %}
    </main>

    <!-- Footer -->
    <footer class="glass-effect mt-12">
        <div class="container mx-auto px-4 py-6">
            <div class="text-center text-gray-400">
                <p>Powered by yarobot - Advanced YARA Rule Generation</p>
                <p class="text-sm mt-2">Secure • Fast • Automated</p>
            </div>
        </div>
    </footer>

    <!-- Scripts -->
    <script>
        // Initialize highlight.js
        hljs.highlightAll();
        
        // Theme management
        function getCurrentTheme() {
            return document.documentElement.getAttribute('data-theme') || 'dark';
        }

        function setTheme(theme) {
            document.documentElement.setAttribute('data-theme', theme);
            localStorage.setItem('yarobot-theme', theme);
            updateThemeUI(theme);
        }

        function updateThemeUI(theme) {
            const themeIcon = document.getElementById('theme-icon');
            const themeText = document.getElementById('theme-text');
            
            if (theme === 'dark') {
                themeIcon.className = 'fas fa-moon';
                themeText.textContent = 'Dark Mode';
            } else {
                themeIcon.className = 'fas fa-sun';
                themeText.textContent = 'Light Mode';
            }
        }

        function toggleTheme() {
            const currentTheme = getCurrentTheme();
            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
            setTheme(newTheme);
            console.log('Theme toggled to:', newTheme);
        }

        // Initialize theme from localStorage or system preference
        function initTheme() {
            const savedTheme = localStorage.getItem('yarobot-theme');
            const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
            
            const theme = savedTheme || (systemPrefersDark ? 'dark' : 'light');
            setTheme(theme);
            console.log('Theme initialized:', theme);
        }

        // File drop zone functionality
        function setupFileDrop() {
            const dropZone = document.getElementById('file-drop-zone');
            if (!dropZone) return;
            
            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
                dropZone.addEventListener(eventName, preventDefaults, false);
            });
            
            function preventDefaults(e) {
                e.preventDefault();
                e.stopPropagation();
            }
            
            ['dragenter', 'dragover'].forEach(eventName => {
                dropZone.addEventListener(eventName, () => {
                    dropZone.classList.add('dragover');
                }, false);
            });
            
            ['dragleave', 'drop'].forEach(eventName => {
                dropZone.addEventListener(eventName, () => {
                    dropZone.classList.remove('dragover');
                }, false);
            });
            
            dropZone.addEventListener('drop', handleDrop, false);
            
            function handleDrop(e) {
                const dt = e.dataTransfer;
                const files = dt.files;
                handleFiles(files);
            }
        }
        
        function handleFiles(files) {
            const fileList = document.getElementById('file-list');
            if (!fileList) return;
            
            fileList.innerHTML = '';
            
            Array.from(files).forEach(file => {
                const fileItem = document.createElement('div');
                fileItem.className = 'flex items-center justify-between p-3 bg-gray-800 rounded-lg mb-2 fade-in';
                fileItem.innerHTML = `
                    <div class="flex items-center space-x-3">
                        <i class="fas fa-file text-blue-400"></i>
                        <span>${file.name}</span>
                        <span class="text-sm text-gray-400">(${(file.size / 1024 / 1024).toFixed(2)} MB)</span>
                    </div>
                    <i class="fas fa-check text-green-400"></i>
                `;
                fileList.appendChild(fileItem);
            });
            
            const analyzeBtn = document.getElementById('analyze-btn');
            if (analyzeBtn) {
                analyzeBtn.disabled = files.length === 0;
            }
        }
        
        // Initialize when page loads
        document.addEventListener('DOMContentLoaded', function() {
            console.log('DOM loaded, initializing theme...');
            initTheme();
            setupFileDrop();
            
            // Add click handler to file input button
            const fileInput = document.getElementById('file-input');
            if (fileInput) {
                fileInput.addEventListener('change', function(e) {
                    handleFiles(e.target.files);
                });
            }
        });

        // Listen for system theme changes
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
            if (!localStorage.getItem('yarobot-theme')) {
                setTheme(e.matches ? 'dark' : 'light');
            }
        });
    </script>
    
    {% block scripts %}{% endblock %}
</body>
</html>