<div class="px-3 pt-3 pb-1">
  <span class="text-[10px] font-mono text-zinc-600 uppercase tracking-wider">
    Active ({{ active_peers | length }})
  </span>
</div>
{% if active_peers %}
<ul class="flex flex-col gap-0.5 px-2 pb-2">
  {% for peer in active_peers %}
  <li>
    <a href="/v2/peer/{{ peer.name }}"
            class="w-full flex items-center gap-2 px-2.5 py-2 rounded-md text-left transition-colors hover:bg-zinc-900 text-zinc-400">
      <span class="w-2 h-2 rounded-full shrink-0 {{ 'bg-emerald-500' if peer.status == 'online' else 'bg-amber-500' if peer.status == 'busy' else 'bg-zinc-600' }}"></span>
      <div class="flex flex-col min-w-0 flex-1">
        <span class="text-sm font-medium truncate">{{ peer.label }}</span>
        {% if peer.description %}
        <span class="text-[10px] text-zinc-500 truncate">{{ peer.description }}</span>
        {% endif %}
      </div>
      <span class="text-[10px] px-1.5 py-0.5 rounded bg-zinc-800 text-zinc-500 font-mono shrink-0">{{ peer.circle }}</span>
    </a>
  </li>
  {% endfor %}
</ul>
{% else %}
<p class="text-xs text-zinc-600 px-3 py-2">No peers online</p>
{% endif %}

{% if offline_count > 0 %}
<div class="border-t border-zinc-800/50">
  <div class="px-3 py-2 text-[10px] font-mono text-zinc-600 uppercase tracking-wider">
    Offline ({{ offline_count }})
  </div>
</div>
{% endif %}
