{% extends "base.html" %}

{% block content %}
<div class="max-w-6xl mx-auto px-4 py-6">
    <!-- Header with File Info -->
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-medium text-gray-100">{{ file_info.original_name }}</h1>
            <p class="text-base text-gray-400 mt-1 font-mono">MD5: {{ file_info.md5 }}</p>
        </div>
        <div class="flex items-center gap-3">
            <!-- Entropy Badge -->
            <div class="flex flex-col items-end">
                <span class="text-sm text-gray-400">Entropy</span>
                <span class="text-lg font-medium {% if file_info.entropy > entropy_risk_levels.High %}text-red-400{% elif file_info.entropy > entropy_risk_levels.Medium %}text-yellow-400{% else %}text-green-400{% endif %}">
                    {{ "%.2f"|format(file_info.entropy) }}
                </span>
            </div>
        </div>
    </div>
    <!-- Navigation Buttons -->
    <div class="flex items-center gap-4 mb-6">
        <button onclick="window.location.href='/results/{{ file_info.md5 }}/static'" 
                class="px-4 py-2 bg-blue-500/10 text-blue-400 border border-blue-900/20 rounded-lg hover:bg-blue-500/20 transition-colors flex items-center gap-2">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
            </svg>
            <span>Static Analysis</span>
        </button>
        <button onclick="window.location.href='/results/{{ file_info.md5 }}/dynamic'" 
                class="px-4 py-2 bg-green-500/10 text-green-400 border border-green-900/20 rounded-lg hover:bg-green-500/20 transition-colors flex items-center gap-2">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
            </svg>
            <span>Dynamic Analysis</span>
        </button>
    </div>

    {# Add this right after the header div, before Navigation Buttons #}
    <!-- Comprehensive Risk Assessment -->
    <div class="bg-black/60 backdrop-blur-sm rounded-xl border border-gray-800 p-6 mb-6">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-medium text-gray-100">Risk Assessment</h2>
            <span class="px-3 py-1 rounded-lg text-sm font-medium 
                {% if file_info.risk_assessment.level == 'Critical' %}
                    bg-red-900/20 text-red-400 border border-red-900/20
                {% elif file_info.risk_assessment.level == 'High' %}
                    bg-red-500/20 text-red-400 border border-red-900/20
                {% elif file_info.risk_assessment.level == 'Medium' %}
                    bg-yellow-500/20 text-yellow-400 border border-yellow-900/20
                {% else %}
                    bg-green-500/20 text-green-400 border border-green-900/20
                {% endif %}">
                {{ file_info.risk_assessment.level }} Risk ({{ file_info.risk_assessment.score }}%)
            </span>
        </div>

        <!-- Risk Score Visualization -->
        <div class="w-full h-3 bg-gray-800 rounded-full mb-4 overflow-hidden">
            <div class="h-full rounded-full transition-all duration-500
                {% if file_info.risk_assessment.level == 'Critical' %}
                    bg-red-900
                {% elif file_info.risk_assessment.level == 'High' %}
                    bg-red-500
                {% elif file_info.risk_assessment.level == 'Medium' %}
                    bg-yellow-500
                {% else %}
                    bg-green-500
                {% endif %}"
                style="width: {{ file_info.risk_assessment.score }}%">
            </div>
        </div>

        <!-- Risk Factors -->
        {% if file_info.risk_assessment.factors %}
        <div class="space-y-2">
            <h3 class="text-sm font-medium text-gray-400 mb-3">Risk Factors</h3>
            {% for factor in file_info.risk_assessment.factors %}
            <div class="flex items-start gap-2 bg-gray-800/50 p-3 rounded-lg">
                <svg class="w-5 h-5 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <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"/>
                </svg>
                <span class="text-gray-300">{{ factor }}</span>
            </div>
            {% endfor %}
        </div>
        {% endif %}
    </div>


    <!-- File Hash Information -->
    <div class="bg-black/60 backdrop-blur-sm rounded-xl border border-gray-800 p-6 mb-6">
        <h2 class="text-lg font-medium text-gray-100 mb-4">File Hashes</h2>
        <div class="space-y-3">
            <div>
                <p class="text-sm text-gray-400">MD5</p>
                <p class="text-gray-200 font-mono text-sm break-all">{{ file_info.md5 }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-400">SHA256</p>
                <p class="text-gray-200 font-mono text-sm break-all">{{ file_info.sha256 }}</p>
            </div>
        </div>
    </div>

    <!-- Basic Information -->
    <div class="bg-black/60 backdrop-blur-sm rounded-xl border border-gray-800 p-6 mb-6">
        <h2 class="text-lg font-medium text-gray-100 mb-4">Basic Information</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div>
                <p class="text-sm text-gray-400">File Size</p>
                <p class="text-gray-200">{{ file_info.size|filesizeformat }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-400">File Type</p>
                <p class="text-gray-200">{{ file_info.mime_type }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-400">Extension</p>
                <p class="text-gray-200">{{ file_info.extension }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-400">Upload Time</p>
                <p class="text-gray-200">{{ file_info.upload_time }}</p>
            </div>
        </div>
    </div>

    {% if file_info.pe_info %}
    <!-- PE Information -->
    <div class="bg-black/60 backdrop-blur-sm rounded-xl border border-gray-800 p-6 mb-6">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-medium text-gray-100">PE Information</h2>
            {% if file_info.pe_info.detection_notes %}
            <span class="px-3 py-1 bg-red-500/20 text-red-400 rounded-lg text-sm">
                {{ file_info.pe_info.detection_notes|length }} Detection Notes
            </span>
            {% endif %}
        </div>
        
        <!-- PE Basic Info -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
            <div>
                <p class="text-sm text-gray-400">File Type</p>
                <p class="text-gray-200">{{ file_info.pe_info.file_type }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-400">Machine Type</p>
                <p class="text-gray-200">{{ file_info.pe_info.machine_type }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-400">Subsystem</p>
                <p class="text-gray-200">{{ file_info.pe_info.subsystem }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-400">Compile Time</p>
                <p class="text-gray-200">{{ file_info.pe_info.compile_time }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-400">Entry Point</p>
                <p class="text-gray-200 font-mono">{{ file_info.pe_info.entry_point }}</p>
            </div>
            {% if file_info.pe_info.checksum_info %}
            <div>
                <p class="text-sm text-gray-400">PE Checksum</p>
                <p class="text-gray-200 font-mono">
                    {% if file_info.pe_info.checksum_info.is_valid %}
                    <span class="text-green-400">Valid</span>
                    {% else %}
                    <span class="text-red-400">Invalid</span>
                    {% endif %}
                </p>
            </div>
            {% endif %}
        </div>

        {% if file_info.pe_info.detection_notes %}
        <!-- Detection Notes -->
        <div class="space-y-2 mb-6">
            <h3 class="text-sm font-medium text-gray-400 mb-3">Detection Notes</h3>
            {% for note in file_info.pe_info.detection_notes %}
            <div class="flex items-start gap-2 bg-red-500/10 p-3 rounded-lg border border-red-900/20">
                <svg class="w-5 h-5 text-red-400 mt-0.5 flex-shrink-0" 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 class="text-gray-300">{{ note }}</span>
            </div>
            {% endfor %}
        </div>
        {% endif %}

        {% if file_info.pe_info.checksum_info and not file_info.pe_info.checksum_info.is_valid %}
        <!-- Checksum Details -->
        <div class="bg-yellow-500/10 p-4 rounded-lg border border-yellow-900/20 mb-6">
            <h3 class="text-sm font-medium text-yellow-400 mb-2">Checksum Mismatch</h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <p class="text-sm text-gray-400">Stored Checksum</p>
                    <p class="text-gray-200 font-mono">{{ file_info.pe_info.checksum_info.stored_checksum }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-400">Calculated Checksum</p>
                    <p class="text-gray-200 font-mono">{{ file_info.pe_info.checksum_info.calculated_checksum }}</p>
                </div>
            </div>
        </div>
        {% endif %}

        <!-- PE Sections -->
        <div class="mb-6">
            <h3 class="text-sm font-medium text-gray-400 mb-3">PE Sections</h3>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="border-b border-gray-800">
                            <th class="text-left py-3 text-gray-400">Name</th>
                            <th class="text-left py-3 text-gray-400">Size</th>
                            <th class="text-left py-3 text-gray-400">Entropy</th>
                            <th class="text-left py-3 text-gray-400">Notes</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for section in file_info.pe_info.sections %}
                        <tr class="border-b border-gray-800">
                            <td class="py-3">
                                <span class="font-mono {% if section.is_standard %}text-gray-300{% else %}text-yellow-500{% endif %}">
                                    {{ section.name }}
                                </span>
                            </td>
                            <td class="py-3 text-gray-300">{{ section.size|filesizeformat }}</td>
                            <td class="py-3">
                                <span class="{% if section.entropy > 7.2 %}text-red-500{% elif section.entropy > 6.8 %}text-yellow-500{% else %}text-gray-300{% endif %}">
                                    {{ "%.2f"|format(section.entropy) }}
                                </span>
                            </td>
                            <td class="py-3">
                                <div class="space-y-1">
                                {% for note in section.detection_notes %}
                                    <div class="text-sm text-red-400">{{ note }}</div>
                                {% endfor %}
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Suspicious Imports -->
        {% if file_info.pe_info.suspicious_imports %}
        <div>
            <h3 class="text-sm font-medium text-gray-400 mb-3">Suspicious Imports</h3>
            <div class="space-y-4">
                {% for dll, imports in file_info.pe_info.grouped_suspicious_imports.items() %}
                <div class="bg-red-500/10 p-4 rounded-lg border border-red-900/20">
                    <h4 class="text-red-400 font-mono mb-2">{{ dll }}</h4>
                    <div class="space-y-2">
                        {% for import in imports %}
                        <div class="pl-4 border-l-2 border-red-900/20">
                            <p class="text-gray-300 font-mono">{{ import.function }}</p>
                            <p class="text-sm text-gray-400 mt-1">{{ import.note }}</p>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </div>
    {% endif %}
</div>
{% endblock %}