{% if not nodes %}
<div class="routing-empty"><i class="fas fa-server"></i><p>No outbounds yet. Add one from a share link.</p></div>
{% else %}
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
{% for node in nodes %}
<div class="routing-card" id="routing-node-{{ node.id }}" style="--stat-rgb: {{ '74,222,128' if node.is_active else '148,163,184' }}; --stat-rgb-light: {{ '22,163,74' if node.is_active else '100,116,139' }};">
    <div class="flex items-start justify-between mb-3">
        <div class="flex items-center gap-3 min-w-0">
            <div class="routing-card-icon"><i class="fas fa-server"></i></div>
            <div class="min-w-0">
                <h3 class="font-bold text-sm truncate" title="{{ node.tag }}">{{ node.tag }}</h3>
                <p class="text-xs opacity-70 truncate">{{ node.server }}:{{ node.port }}</p>
            </div>
        </div>
        <span class="routing-type-badge">{{ node.type }}</span>
    </div>
    <div class="flex items-center justify-between mb-3">
        <span class="routing-delay-badge" id="routing-delay-{{ node.id }}" data-node-id="{{ node.id }}">—</span>
        <button type="button" class="routing-btn routing-btn-sm" title="Test latency" onclick="routingTestOneDelay({{ node.id }})">
            <i class="fas fa-bolt"></i>
        </button>
    </div>
    <div class="flex gap-2">
        <button type="button" class="routing-btn flex-1" onclick="routingToggleOutbound({{ node.id }})">
            <i class="fas {{ 'fa-pause' if node.is_active else 'fa-play' }}"></i> {{ 'Disable' if node.is_active else 'Enable' }}
        </button>
        <button type="button" class="routing-btn routing-btn-danger flex-1" onclick="routingDeleteOutbound({{ node.id }}, '{{ node.tag }}')">
            <i class="fas fa-trash"></i> Delete
        </button>
    </div>
</div>
{% endfor %}
</div>
{% endif %}