{% if not groups %}
<div class="routing-empty"><i class="fas fa-layer-group"></i><p>No load balancers yet.</p></div>
{% else %}
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
{% for group in groups %}
<div class="routing-card" id="routing-group-{{ group.id }}" style="--stat-rgb: 96,165,250; --stat-rgb-light: 37,99,235;">
    <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-layer-group"></i></div>
            <div class="min-w-0">
                <h3 class="font-bold text-sm truncate" title="{{ group.name }}">{{ group.name }}</h3>
                <p class="text-xs opacity-70">{{ group.node_tags_json | from_json | length }} outbound(s)</p>
            </div>
        </div>
    </div>
    <div class="flex flex-wrap gap-1.5 mb-3">
        {% for tag in group.node_tags_json | from_json %}
        <span class="routing-type-badge">{{ tag }}</span>
        {% endfor %}
    </div>
    <button type="button" class="routing-btn routing-btn-danger w-full" onclick="routingDeleteGroup({{ group.id }}, '{{ group.name }}')">
        <i class="fas fa-trash"></i> Delete
    </button>
</div>
{% endfor %}
</div>
{% endif %}