Function displayLootTable

web/scripts/ragnar_modern.js:12292–12367

(data)

    if (!select) return;
    const current = select.value;
    // Rebuild options preserving selection
    select.innerHTML = '<option value="all">All Networks</option>';
    (networks || []).forEach(n => {
        const opt = document.createElement('option');
        opt.value = n;
        opt.textContent = n === 'unknown' ? 'Unknown Network' : n;
        if (n === current) opt.selected = true;
        select.appendChild(opt);
    });
}

function _buildAttackHostBlock(ip, hostLogs) {
    const successCount = hostLogs.filter(l => l.status === 'success').length;
    const failedCount  = hostLogs.filter(l => l.status === 'failed').length;
    const timeoutCount = hostLogs.filter(l => l.status === 'timeout').length;
    const safeId = ip.replace(/[^a-zA-Z0-9]/g, '-');

    let html = `
        <div class="bg-slate-800 bg-opacity-50 rounded-lg border border-slate-700 overflow-hidden">
            <div class="px-4 py-3 bg-slate-900 bg-opacity-50 flex items-center justify-between cursor-pointer hover:bg-opacity-70 transition-colors" onclick="toggleAttackHost('${safeId}')">
                <div class="flex items-center space-x-3">
                    <svg class="w-5 h-5 text-Ragnar-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path>
                    </svg>
                    <span class="font-semibold text-lg">${ip}</span>
                    <span class="text-sm text-gray-400">(${hostLogs.length} attacks)</span>
                </div>
                <div class="flex items-center space-x-4">
                    <span class="text-sm text-green-400">✓ ${successCount}</span>
                    <span class="text-sm text-red-400">✗ ${failedCount}</span>
                    <span class="text-sm text-yellow-400">⏱ ${timeoutCount}</span>
                    <svg id="attack-chevron-${safeId}" class="w-5 h-5 text-gray-400 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                    </svg>
                </div>
            </div>
            <div id="attack-host-${safeId}" class="hidden px-4 py-3 space-y-2">
    `;

    hostLogs.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));

    hostLogs.forEach(log => {
        const statusColors = {
            'success': 'bg-green-900 bg-opacity-30 border-green-500',
            'failed':  'bg-red-900 bg-opacity-30 border-red-500',
            'timeout': 'bg-yellow-900 bg-opacity-30 border-yellow-500'
        };
        const statusIcons      = { 'success': '✓', 'failed': '✗', 'timeout': '⏱' };
        const statusTextColors = { 'success': 'text-green-400', 'failed': 'text-red-400', 'timeout': 'text-yellow-400' };

        const colorClass = statusColors[log.status]     || 'bg-gray-900 bg-opacity-30 border-gray-500';
        const icon       = statusIcons[log.status]      || '•';
        const textColor  = statusTextColors[log.status] || 'text-gray-400';

        html += `
            <div class="border-l-4 ${colorClass} p-3 rounded-r-lg">
                <div class="flex items-start justify-between">
                    <div class="flex-1">