{% if submission %}
<div class="space-y-4">
    <table class="min-w-full text-sm border border-card">
        <tbody class="bg-table">
            <tr>
                <td class="px-3 py-2 font-semibold text-label w-1/4">Submission ID:</td>
                <td class="px-3 py-2 border-r border-card">{{ submission.id }}</td>

                <td class="px-3 py-2 font-semibold text-label">File ID:</td>
                <td class="px-3 py-2 border-r border-card">{{ submission.file_id }}</td>

                <td class="px-3 py-2 font-semibold text-label">Created:</td>
                <td class="px-3 py-2 text-timestamp">{{ submission.created_at|strftime('%Y-%m-%d %H:%M:%S') }}</td>
            </tr>

            <tr>
                <td class="px-3 py-2 font-semibold text-label">Submission Comment:</td>
                <td class="px-3 py-2 border-r border-card">{{ submission.comment }}</td>

                <td class="px-3 py-2 font-semibold text-label">File Comment:</td>
                <td class="px-3 py-2 border-r border-card">{{ submission.file.comment }}</td>

                <td class="px-3 py-2 font-semibold text-label">Updated:</td>
                <td class="px-3 py-2 text-timestamp">{{ submission.updated_at|strftime('%Y-%m-%d %H:%M:%S') }}</td>
            </tr>

            <tr>
                <td class="px-3 py-2 font-semibold text-label">Submission Status:</td>
                <td class="px-3 py-2 border-r border-card"><span class="px-2 py-1 rounded text-xs {{ get_status_color(submission.status) }}">{{ submission.status }}</span></td>

                <td class="px-3 py-2 font-semibold text-label">User:</td>
                <td class="px-3 py-2">{{ submission.user or '' }}</td>

                <td class="px-3 py-2 font-semibold text-label">Completed:</td>
                <td class="px-3 py-2 text-timestamp">{{ submission.completed_at|strftime('%Y-%m-%d %H:%M:%S') if submission.completed_at else 'N/A' }}</td>
            </tr>

            <tr>
                <td class="px-3 py-2 font-semibold text-label">EDR Verdict:</td>
                <td class="px-3 py-2 border-r border-card"><span class="px-2 py-1 rounded text-xs font-medium {{ get_submission_status_color(submission.edr_verdict) }}"> {{ submission.edr_verdict }}</span></td>

                <td class="px-3 py-2 font-semibold text-label">Project:</td>
                <td class="px-3 py-2 border-r border-card">{{ submission.project or '' }}</td>

                <td class="px-3 py-2 font-semibold text-label">Profile:</td>
                <td class="px-3 py-2 border-r border-card">{{ submission.profile.name if submission.profile else '' }}</td>
            </tr>

            <tr>
                <td class="px-3 py-2 font-semibold text-label">Execution Mode:</td>
                <td class="px-3 py-2 border-r border-card">{{ submission.execution_mode or '' }} for {{ submission.runtime }} seconds</td>

                <td class="px-3 py-2 font-semibold text-label">Drop Path:</td>
                <td class="px-3 py-2 border-r border-card">{{ submission.drop_path or '' }}</td>

                <td class="px-3 py-2 font-semibold text-label">Profile Connector:</td>
                <td class="px-3 py-2">{{ submission.profile.connector if submission.profile else '' }}</td>
            </tr>

            <tr>
                <td class="px-3 py-2 font-semibold text-label">Agent Phase:</td>
                <td class="px-3 py-2 border-r border-card">{{ submission.agent_phase or '' }}</td>

                <td class="px-3 py-2 font-semibold text-label">Absorber Status:</td>
                <td class="px-3 py-2 border-r border-card">{{ submission.absorber_status or '' }}</td>

                <td class="px-3 py-2 font-semibold text-label">Profile Comment:</td>
                <td class="px-3 py-2 border-r border-card">{{ submission.profile.comment if submission.profile else '' }}</td>
            </tr>
        </tbody>
    </table>

    <!-- Logs Tabs -->
    <div class="w-full">
        <div class="border-b border-card">
            <nav class="-mb-px flex space-x-8" aria-label="Tabs">
                <button class="tab-button whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm tab-active" 
                    data-tab="detonator-alerts" onclick="showTab('detonator-alerts', this)"
                >
                    Alerts
                </button>

                {% if submission.server_logs %}
                <button class="tab-button whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm border-transparent text-description hover:text-label hover:border-divider" 
                    data-tab="detonator-logs" onclick="showTab('detonator-logs', this)"
                >
                    Server Logs
                </button>
                {% endif %}

                {% if submission.agent_logs %}
                <button class="tab-button whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm border-transparent text-description hover:text-label hover:border-divider" 
                    data-tab="agent-logs" onclick="showTab('agent-logs', this)"
                >
                    Agent Logs
                </button>
                {% endif %}

                {% if submission.process_output %}
                <button class="tab-button whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm border-transparent text-description hover:text-label hover:border-divider" 
                    data-tab="execution-logs" onclick="showTab('execution-logs', this)"
                >
                    Process Output
                </button>
                {% endif %}

                {% if submission.rededr_logs %}
                <button class="tab-button whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm border-transparent text-description hover:text-label hover:border-divider" 
                    data-tab="rededr-logs" onclick="showTab('rededr-logs', this)"
                >
                    RedEdr Logs
                </button>
                {% endif %}
            </nav>
        </div>
        
        <div class="mt-4">
            <div id="detonator-alerts" class="tab-content">
                <div class="text-label text-sm mt-2 space-y-3">
                    <div class="overflow-x-auto">

                        {% if submission.alerts and submission.alerts|length > 0 %}
                        <table class="min-w-full divide-y divide-gray-200 text-sm">
                            <thead>
                                <tr>
                                    <th class="px-3 py-2 text-left font-medium text-label">Source</th>
                                    <th class="px-3 py-2 text-left font-medium text-label">Threat</th>
                                    <th class="px-3 py-2 text-left font-medium text-label">Severity</th>
                                    <th class="px-3 py-2 text-left font-medium text-label">Category</th>
                                    <th class="px-3 py-2 text-left font-medium text-label">Detection Source</th>
                                    <th class="px-3 py-2 text-left font-medium text-label">Detected At</th>
                                    <th class="px-3 py-2 text-left font-medium text-label">Raw</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-dark bg-table">
                                {% for alert in submission.alerts %}
                                <tr>
                                    <td class="px-3 py-2 whitespace-nowrap">{{ alert.source or 'N/A' }}</td>
                                    <td class="px-3 py-2">
                                        {{ alert.title }}
                                        {% if alert.source == "Defender Local" %}
                                            (<a href="https://defendersearch.r00ted.ch/search?threat_name={{ alert.title }}" class="link-info hover:underline" target="_blank">DefenderDB</a>)
                                        {% elif alert.source == "Elastic Plugin" %}
                                            {% set rule_path = alert.additional_data.rule_id|resolve_elastic_rule if alert.additional_data and alert.additional_data.rule_id else None %}
                                            {% if rule_path %}
                                            (<a href="https://github.com/elastic/detection-rules/tree/main/{{ rule_path }}" class="link-info hover:underline" target="_blank">ElasticDB</a>)
                                            {% endif %}
                                        {% endif %}
                                    </td>
                                    <td class="px-3 py-2 whitespace-nowrap">
                                        <span class="px-2 py-0.5 rounded {{ get_alert_severity_color(alert.severity) }}">
                                            {{ alert.severity or 'Unknown' }}
                                        </span>
                                    </td>
                                    <td class="px-3 py-2">{{ alert.category or 'N/A' }}</td>
                                    <td class="px-3 py-2 whitespace-nowrap">{{ alert.detection_source or 'N/A' }}</td>
                                    <td class="px-3 py-2 whitespace-nowrap">
                                        {% if alert.detected_at %}
                                        {{ alert.detected_at|strftime('%Y-%m-%d %H:%M:%S') }}
                                        {% else %}
                                        N/A
                                        {% endif %}
                                    </td>
                                    <td class="px-3 py-2 whitespace-nowrap">
                                        {% if alert.raw %}
                                        <button class="px-3 py-1.5 text-sm rounded bg-blue-600 hover:bg-blue-700 text-white font-medium shadow-sm" 
                                                onclick="showJsonDialog({{ loop.index0 }})">
                                            View
                                        </button>
                                        <div id="json-dialog-{{ loop.index0 }}" class="json-dialog hidden fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900">
                                            <div class="bg-card border border-divider rounded shadow-2xl flex flex-col" style="width: 90%; max-width: 1200px; height: 90vh;">
                                                <div class="flex justify-between items-center p-4 border-b border-divider flex-shrink-0">
                                                    <span class="text-label font-medium text-base">Raw Alert Data</span>
                                                    <button class="text-label hover:text-red-500 text-2xl leading-none" onclick="hideJsonDialog({{ loop.index0 }})">&times;</button>
                                                </div>
                                                <div class="flex-1 p-4" style="overflow-y: auto; overflow-x: auto;">
                                                    <pre class="text-xs text-label" style="margin: 0; white-space: pre; word-wrap: normal;">{{ alert.raw|pretty_json }}</pre>
                                                </div>
                                            </div>
                                        </div>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>

                        {% else %}
                        <div class="text-label text-sm mt-2">No alerts.</div>
                        {% endif %}
                    </div>
                </div>
            </div>

            {% if submission.server_logs %}
            <div id="detonator-logs" class="tab-content hidden">
                <pre class="bg-code p-2 rounded text-sm overflow-y-auto w-full" data-scroll-bottom
                >{{ submission.server_logs }}</pre>
            </div>
            {% endif %}

            {% if submission.agent_logs %}
            <div id="agent-logs" class="tab-content hidden">
                <pre class="bg-code p-2 rounded text-sm overflow-y-auto w-full" data-scroll-bottom
                >{{ submission.agent_logs }}
                </pre>
            </div>
            {% endif %}
            
            {% if submission.process_output %}
            <div id="execution-logs" class="tab-content hidden">
                <pre class="bg-code p-2 rounded text-sm overflow-y-auto w-full" data-scroll-bottom
                >{{ (submission.process_output|from_json).stdout }}</pre>

                <pre class="bg-code p-2 rounded text-sm overflow-y-auto w-full" data-scroll-bottom
                >{{ (submission.process_output|from_json).stderr }}</pre>
            </div>
            {% endif %}
            
            {% if submission.rededr_logs %}
            <div id="rededr-logs" class="tab-content hidden">
                <pre class="bg-code p-2 rounded text-sm overflow-y-auto w-full whitespace-pre-wrap" data-scroll-bottom
                    >{{ submission.rededr_logs|pretty_json }}</pre>
            </div>
            {% endif %}
    </div>
    
    <script>
        function showTab(tabId, clickedButton) {
            // Hide all tab contents
            const allTabs = document.querySelectorAll('.tab-content');
            allTabs.forEach(tab => {
                tab.classList.add('hidden');
            });
            
            // Remove active styles from all buttons
            const allButtons = document.querySelectorAll('.tab-button');
            allButtons.forEach(btn => {
                btn.classList.remove('tab-active');
                btn.classList.add('border-transparent', 'text-description');
            });
            
            // Show target tab
            const targetTab = document.getElementById(tabId);
            if (targetTab) {
                targetTab.classList.remove('hidden');
            }
            
            // Style active button
            clickedButton.classList.remove('border-transparent', 'text-description');
            clickedButton.classList.add('tab-active');
        }

        function showJsonDialog(index) {
            // Hide all other dialogs
            document.querySelectorAll('.json-dialog').forEach(d => {
                if (d.id !== `json-dialog-${index}`) {
                    d.classList.add('hidden');
                }
            });

            const dialog = document.getElementById(`json-dialog-${index}`);
            dialog.classList.remove('hidden');
            document.body.style.overflow = 'hidden'; // Prevent background scrolling
        }

        function hideJsonDialog(index) {
            const dialog = document.getElementById(`json-dialog-${index}`);
            dialog.classList.add('hidden');
            document.body.style.overflow = ''; // Restore scrolling
        }

        // Close dialogs when clicking on backdrop
        document.addEventListener('click', function(event) {
            if (event.target.classList.contains('json-dialog')) {
                event.target.classList.add('hidden');
                document.body.style.overflow = '';
            }
        });

        // Close dialogs with Escape key
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape') {
                document.querySelectorAll('.json-dialog').forEach(d => {
                    d.classList.add('hidden');
                });
                document.body.style.overflow = '';
            }
        });
    </script>
</div>

{% else %}
<div class="text-center text-red-500">
    <p>Error: Could not load submission details.</p>
</div>
{% endif %}