{% if unknown_units %}
<div class="mb-6 rounded-xl shadow-lg bg-yellow-50 dark:bg-yellow-900/20 border-2 border-yellow-400 dark:border-yellow-600 p-6">
    <div class="flex items-start gap-3 mb-4">
        <svg class="w-6 h-6 text-yellow-600 dark:text-yellow-400 flex-shrink-0 mt-1" 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"></path>
        </svg>
        <div class="flex-1">
            <h2 class="text-xl font-bold text-yellow-900 dark:text-yellow-200">Unknown Emitters Detected</h2>
            <p class="text-sm text-yellow-800 dark:text-yellow-300 mt-1">
                {{ unknown_units|length }} unit(s) are reporting but not in the roster. Add them to track them properly.
            </p>
        </div>
    </div>

    <div class="space-y-3">
        {% for unit in unknown_units %}
        <div class="bg-white dark:bg-slate-800 rounded-lg p-4 flex items-center justify-between border border-yellow-300 dark:border-yellow-700">
            <div class="flex items-center gap-4 flex-1">
                <div class="font-mono font-bold text-lg text-gray-900 dark:text-white">
                    {{ unit.id }}
                </div>
                <div class="flex items-center gap-3 text-sm">
                    <span class="px-2 py-1 rounded-full
                        {% if unit.status == 'OK' %}bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300
                        {% elif unit.status == 'Pending' %}bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300
                        {% else %}bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300{% endif %}">
                        {{ unit.status }}
                    </span>
                    <span class="text-gray-600 dark:text-gray-400">
                        Last seen: {{ unit.age }}
                    </span>
                    {% if unit.fname %}
                    <span class="text-gray-500 dark:text-gray-500 text-xs truncate max-w-xs">
                        {{ unit.fname }}
                    </span>
                    {% endif %}
                </div>
            </div>
            <div class="ml-4 flex gap-2">
                <button
                    onclick="addUnknownUnit('{{ unit.id }}')"
                    class="px-4 py-2 bg-seismo-orange hover:bg-orange-600 text-white rounded-lg flex items-center gap-2 transition-colors whitespace-nowrap">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                    </svg>
                    Add to Roster
                </button>
                <button
                    onclick="ignoreUnknownUnit('{{ unit.id }}')"
                    class="px-4 py-2 bg-gray-500 hover:bg-gray-600 text-white rounded-lg flex items-center gap-2 transition-colors whitespace-nowrap">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"></path>
                    </svg>
                    Ignore
                </button>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}