<!-- app/templates/upload.html -->

{% extends "base.html" %}

{% block page_title %}Upload Payload{% endblock %}

{% block content %}
<div class="max-w-5xl mx-auto px-4 py-6">
    <!-- Progress Steps - Enhanced with better spacing and visual hierarchy -->
    <div class="flex items-center space-x-6 mb-10">
        <!-- Upload Step - Improved visibility and interaction states -->
        <div class="flex items-center space-x-4">
            <div id="step1Circle" class="w-12 h-12 rounded-full bg-red-500/10 border-2 border-red-500 flex items-center justify-center transition-all duration-300 shadow-lg">
                <span id="step1Text" class="text-red-500 font-medium text-xl">1</span>
            </div>
            <div class="flex flex-col">
                <span id="step1Label" class="text-gray-200 font-medium text-lg tracking-wide">Upload</span>
                <span class="text-base text-gray-400">Select payload</span>
            </div>
        </div>
        <!-- Progress Line - Enhanced visibility -->
        <div id="progressLine" class="flex-1 h-1 bg-gradient-to-r from-red-500/30 via-red-500/10 to-gray-800 transition-all duration-300"></div>
        <!-- Analysis Step - Improved consistency -->
        <div class="flex items-center space-x-4">
            <div id="step2Circle" class="w-12 h-12 rounded-full bg-black/50 border-2 border-gray-700 flex items-center justify-center transition-all duration-300 shadow-lg">
                <span id="step2Text" class="text-gray-500 font-medium text-xl">2</span>
            </div>
            <div class="flex flex-col">
                <span class="text-lg text-gray-400 font-medium tracking-wide">Analysis</span>
                <span class="text-base text-gray-400">Choose type</span>
            </div>
        </div>
    </div>

    <!-- Upload Area - Enhanced visual feedback and interactions -->
    <div id="uploadArea" class="transition-all duration-300">
        <div class="bg-black/60 backdrop-blur-lg rounded-xl border border-gray-800 shadow-xl">
            <!-- Drop Zone - Improved drag and drop feedback -->
            <div id="dropZone" class="relative group">
                <input type="file" id="fileInput" class="hidden" accept=".exe,.dll,.bin,.docx,.xlsx,.lnk,.sys">
                <label for="fileInput" class="cursor-pointer block p-14 border-2 border-dashed border-gray-700 hover:border-red-500/50 m-8 rounded-xl transition-all duration-300">
                    <!-- Enhanced hover gradient -->
                    <div class="absolute inset-0 bg-gradient-to-b from-red-500/10 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl"></div>
                    
                    <!-- Upload Content - Improved layout and spacing -->
                    <div class="relative space-y-8 text-center">
                        <!-- Upload Icon - Enhanced visual feedback -->
                        <div class="upload-icon w-28 h-28 mx-auto bg-gradient-to-b from-red-500/15 to-red-500/5 rounded-full flex items-center justify-center transform transition-all duration-300 group-hover:scale-110">
                            <svg class="w-14 h-14 text-red-500 transition-colors duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
                            </svg>
                        </div>
                        
                        <!-- Text Content - Enhanced typography and spacing -->
                        <div class="space-y-4">
                            <h3 class="text-xl font-medium text-gray-200 group-hover:text-white transition-colors">
                                Drop payload here or click to browse
                            </h3>
                            <div class="flex flex-wrap justify-center gap-3">
                                <span class="text-base text-gray-400">Supported formats:</span>
                                {% for ext in config.upload.allowed_extensions %}
                                <span class="px-3 py-1.5 text-base bg-red-500/5 rounded-lg text-red-400 font-mono border border-red-900/20">
                                    .{{ ext }}
                                </span>
                                {% endfor %}
                            </div>
                            <div class="text-base text-gray-400 pt-2">
                                Maximum file size: {{ (config.upload.max_file_size / 1024 / 1024) | round(1) }} MB
                            </div>
                        </div>
                    </div>
                </label>
            </div>
            <!-- Upload Status - Enhanced visibility -->
            <div id="uploadStatus" class="hidden px-8 pb-8"></div>
        </div>
    </div>

    <!-- File Info & Analysis View - Improved layout and spacing -->
    <div id="fileAnalysisArea" class="hidden opacity-0 transform scale-95 transition-all duration-300 space-y-8 z-[40]">
        <!-- Analysis Options -->
        <div class="bg-black/60 backdrop-blur-lg rounded-xl border border-gray-800 shadow-xl">
            <div class="p-8">
                <h4 class="text-xl font-medium text-gray-200 mb-8">Choose Analysis Type</h4>
                <div class="grid grid-cols-2 gap-8">
                    <!-- Static Analysis - Enhanced card design -->
                    <button onclick="selectAnalysisType('static')" class="group text-left">
                        <div class="p-6 rounded-xl border border-gray-800 hover:border-red-500/50 bg-gradient-to-br from-gray-900/50 to-black/30 transition-all duration-300 hover:shadow-lg">
                            <div class="flex items-center space-x-4 mb-4">
                                <div class="p-3 bg-red-500/10 rounded-lg group-hover:bg-red-500/20 transition-colors">
                                    <svg class="w-7 h-7 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                                    </svg>
                                </div>
                                <div>
                                    <h5 class="text-lg font-medium text-gray-200 group-hover:text-white">Static Analysis</h5>
                                    <p class="text-base text-gray-400">No execution required</p>
                                </div>
                            </div>
                            
                            <p class="text-base text-gray-400 group-hover:text-gray-300 mb-4">
                                Analyze payload content and structure without execution. Identify signature-based patterns and static IOCs.
                            </p>
                            
                            <div class="space-y-3">
                                <div class="flex items-center space-x-3 text-base text-gray-400">
                                    <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                    </svg>
                                    <span>YARA Pattern Matching</span>
                                </div>
                                <div class="flex items-center space-x-3 text-base text-gray-400">
                                    <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                    </svg>
                                    <span>Threat Check</span>
                                </div>
                                <div class="flex items-center space-x-3 text-base text-gray-400">
                                    <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                    </svg>
                                    <span>Strings Analysis</span>
                                </div>
                            </div>
                        </div>
                    </button>

                    <!-- Dynamic Analysis - Enhanced warning states -->
                    <button onclick="selectAnalysisType('dynamic')" class="group text-left">
                        <div class="p-6 rounded-xl border border-gray-800 hover:border-red-500/50 bg-gradient-to-br from-gray-900/50 to-black/30 transition-all duration-300 hover:shadow-lg">
                            <div class="flex items-center space-x-4 mb-4">
                                <div class="p-3 bg-red-500/10 rounded-lg group-hover:bg-red-500/20 transition-colors">
                                    <svg class="w-7 h-7 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
                                        <path d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                    </svg>
                                </div>
                                
                                <div class="flex items-center space-x-2">
                                    <div>
                                        <h5 class="text-lg font-medium text-gray-200 group-hover:text-white">Dynamic Analysis</h5>
                                        <p class="text-base text-gray-400">Runtime behavior analysis</p>
                                    </div>
                                    
                                    <!-- Warning Icon with Enhanced Tooltip -->
                                    <div class="relative inline-block"
                                         onmouseover="document.getElementById('dynamicTooltip').classList.remove('hidden')"
                                         onmouseout="document.getElementById('dynamicTooltip').classList.add('hidden')">
                                        <svg class="w-6 h-6 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                                        </svg>
                                        <div id="dynamicTooltip" class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-3 hidden">
                                            <div class="bg-yellow-500/10 border border-yellow-900/20 text-yellow-500 text-sm rounded-lg p-3 whitespace-nowrap shadow-xl">
                                                Dynamic analysis will execute the payload
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <p class="text-base text-gray-400 group-hover:text-gray-300 mb-4">
                                Execute and monitor payload behavior in real-time with memory analysis.
                            </p>
                            
                            <div class="space-y-3">
                                <div class="flex items-center space-x-3 text-base text-gray-400">
                                    <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                    </svg>
                                    <span>Moneta</span>
                                </div>
                                <div class="flex items-center space-x-3 text-base text-gray-400">
                                    <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                    </svg>
                                    <span>PE-Sieve</span>
                                </div>
                                <div class="flex items-center space-x-3 text-base text-gray-400">
                                    <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                    </svg>
                                    <span>Yara Rules</span>
                                </div>
                                <div class="flex items-center space-x-3 text-base text-gray-400">
                                    <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                    </svg>
                                    <span>Patriot</span>
                                </div>
                                <div class="flex items-center space-x-3 text-base text-gray-400">
                                    <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                    </svg>
                                    <span>Hunt-Sleeping-Beacons</span>
                                </div>
                            </div>
                        </div>
                    </button>
                </div>
            </div>
        </div>


        <!-- File Information Card -->
        <div class="bg-black/60 backdrop-blur-sm rounded-xl border border-gray-800 shadow-lg">
            <div class="p-6">
                <!-- Basic File Info -->
                <div class="flex items-center justify-between mb-6 pb-6 border-b border-gray-800">
                    <div class="flex items-center space-x-4">
                        <div class="p-3 bg-red-500/10 rounded-lg">
                            <svg class="w-8 h-8 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                            </svg>
                        </div>
                        <div>
                            <h3 id="fileName" class="text-lg font-medium text-gray-300"></h3>
                            <div class="flex items-center mt-1 space-x-3">
                                <span id="fileSize" class="text-base text-gray-400"></span>
                                <span class="text-gray-600">•</span>
                                <span id="fileType" class="text-base text-gray-400"></span>
                            </div>
                        </div>
                    </div>
                    <button onclick="location.reload()" class="px-4 py-2 text-base text-red-500 border border-red-900/20 rounded-lg hover:bg-red-500/10 transition-colors">
                        Upload Another File
                    </button>
                </div>

                <!-- File Analysis Data -->
                <div class="space-y-6">
                    <!-- Hash Information -->
                    <div class="grid grid-cols-2 gap-4">
                        <div class="bg-gray-900/30 rounded-lg p-4">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-base text-gray-300">MD5</span>
                                <button onclick="copyHash('md5Hash')" class="px-2 py-1 text-sm text-gray-400 hover:text-red-500 flex items-center space-x-1 hover:bg-red-500/10 rounded transition-colors">
                                    <span>Copy</span>
                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2"/>
                                    </svg>
                                </button>
                            </div>
                            <div class="relative group">
                                <code id="md5Hash" class="text-base text-gray-300 font-mono block truncate"></code>
                                <div class="absolute hidden group-hover:block bg-gray-900 text-base text-gray-300 font-mono p-2 rounded-lg border border-gray-700 shadow-lg mt-1 left-0 z-10 break-all">
                                    <span id="md5HashFull"></span>
                                </div>
                            </div>
                        </div>
                        <div class="bg-gray-900/30 rounded-lg p-4">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-base text-gray-300">SHA256</span>
                                <button onclick="copyHash('sha256Hash')" class="px-2 py-1 text-sm text-gray-400 hover:text-red-500 flex items-center space-x-1 hover:bg-red-500/10 rounded transition-colors">
                                    <span>Copy</span>
                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2"/>
                                    </svg>
                                </button>
                            </div>
                            <div class="relative group">
                                <code id="sha256Hash" class="text-base text-gray-300 font-mono block truncate"></code>
                                <div class="absolute hidden group-hover:block bg-gray-900 text-base text-gray-300 font-mono p-2 rounded-lg border border-gray-700 shadow-lg mt-1 left-0 z-10 break-all">
                                    <span id="sha256HashFull"></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Enhanced Entropy Analysis -->
                    <div class="bg-gray-900/30 rounded-lg p-4">
                        <div class="flex items-center justify-between mb-4">
                            <span class="text-base text-gray-300">Entropy Analysis</span>
                            <span id="detectionRisk" class="px-3 py-1 text-sm rounded-full"></span>
                        </div>
                        <div class="space-y-4">
                            <div class="flex items-center justify-between">
                                <span class="text-sm text-gray-400">Overall Entropy</span>
                                <div id="fileEntropy" class="text-lg font-semibold text-gray-300"></div>
                            </div>
                            <div class="relative h-2 bg-gray-800 rounded-full overflow-hidden">
                                <div id="entropyBar" class="absolute h-full transition-all duration-300"></div>
                            </div>
                            <div id="entropyNotes" class="text-sm text-gray-400 space-y-1">
                                <!-- Populated by JS -->
                            </div>
                        </div>
                    </div>

                    <!-- File Basic Info -->
                    <div class="grid grid-cols-3 gap-4">
                        <div class="bg-gray-900/30 rounded-lg p-4">
                            <div class="text-base text-gray-300 mb-1">Type</div>
                            <div id="fileCategory" class="text-lg font-semibold text-gray-300"></div>
                        </div>
                        <div class="bg-gray-900/30 rounded-lg p-4">
                            <div class="text-base text-gray-300 mb-1">Upload Time</div>
                            <div id="uploadTime" class="text-lg font-semibold text-gray-300"></div>
                        </div>
                        <div class="bg-gray-900/30 rounded-lg p-4">
                            <div class="text-base text-gray-300 mb-1">Format</div>
                            <div id="fileFormat" class="text-lg font-semibold text-gray-300"></div>
                        </div>
                    </div>

                    <!-- PE Checksum Info -->
                    <div id="checksumInfo" class="bg-gray-900/30 rounded-lg p-4 mb-4">
                        <div class="flex items-center justify-between mb-4">
                            <span class="text-base text-gray-300">PE Checksum Analysis</span>
                            <span id="checksumStatus" class="px-3 py-1 text-sm rounded-full"></span>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <div class="text-sm text-gray-400 mb-1">Stored Checksum</div>
                                <div id="storedChecksum" class="text-base font-mono text-gray-300"></div>
                            </div>
                            <div>
                                <div class="text-sm text-gray-400 mb-1">Calculated Checksum</div>
                                <div id="calculatedChecksum" class="text-base font-mono text-gray-300"></div>
                            </div>
                        </div>
                        <div id="checksumNotes" class="mt-4 text-sm text-gray-400 space-y-1">
                            <!-- Populated by JS -->
                        </div>
                    </div>

                    <!-- Suspicious Imports Analysis -->
                    <div id="suspiciousImports" class="bg-gray-900/30 rounded-lg p-4 mb-4 hidden">
                        <div class="flex items-center justify-between mb-4">
                            <span class="text-base text-gray-300">Suspicious Imports Analysis</span>
                            <span id="suspiciousImportsCount" class="px-3 py-1 text-sm bg-red-500/10 text-red-500 rounded-full">
                                <!-- Count populated by JS -->
                            </span>
                        </div>
                        <div id="suspiciousImportsList" class="space-y-4">
                            <!-- List populated by JS -->
                        </div>
                        <div class="border-t border-gray-800 pt-4 mt-4">
                            <div class="text-sm text-gray-400">
                                <div class="flex items-center space-x-2">
                                    <svg class="w-4 h-4 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                                            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                                    </svg>
                                    <span id="suspiciousImportsSummary"></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- PE File Specific Info -->
                    <div id="peInfo" class="bg-gray-900/30 rounded-lg p-4 hidden">
                        <div class="space-y-6">
                            <div class="text-base text-gray-300 mb-2">Section Analysis</div>
                            <div id="sectionsList" class="space-y-4">
                                <!-- Populated by JS -->
                            </div>
                            <div class="border-t border-gray-800 pt-4">
                                <div class="text-base text-gray-300 mb-2">Detection Notes</div>
                                <div id="detectionNotes" class="space-y-2 text-sm text-gray-400">
                                    <!-- Populated by JS -->
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Office File Specific Info -->
                    <div id="officeInfo" class="bg-gray-900/30 rounded-lg p-4 hidden">
                        <div class="space-y-4">
                            <div class="flex items-center justify-between">
                                <span class="text-base text-gray-300">Macro Analysis</span>
                                <span id="macroStatus" class="px-3 py-1 text-sm rounded-full"></span>
                            </div>
                            <div id="macroDetectionNotes" class="space-y-2 text-sm text-gray-400">
                                <!-- Populated by JS -->
                            </div>
                            <div id="macroInfo" class="text-sm text-gray-400">
                                <!-- Populated by JS -->
                            </div>
                        </div>
                    </div>

                    <!-- Generic File Info -->
                    <div id="fileSpecificInfo" class="bg-gray-900/30 rounded-lg p-4 text-base text-gray-300">
                        <!-- Dynamically populated based on file type -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Toast Notifications -->
<div id="toastContainer" class="fixed bottom-4 right-4 space-y-2"></div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/upload.js') }}"></script>
{% endblock %}
