<!-- Running Containers Panel -->
{{$running := dashboard.RunningContainers}}
<div class="panel-card">
    <div class="flex items-center justify-between px-4 pt-3 pb-1">
        <h3 class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">Running</h3>
        {{if $running}}
        <span class="text-[10px] font-medium text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full">{{len $running}}</span>
        {{end}}
    </div>

    {{if $running}}
    <div class="px-1 pb-1">
        {{range $ct := $running}}
        <div class="group flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-white/60 hover:shadow-sm hover:shadow-slate-200/50 transition-all duration-200">
            <span class="w-2 h-2 rounded-full bg-emerald-500 glow-emerald shrink-0"></span>
            <div class="flex-1 min-w-0">
                {{if $ct.RepoName}}
                <a href="/services/{{$ct.RepoName}}/{{$ct.SvcName}}" class="text-[13px] font-medium text-slate-600 truncate hover:text-indigo-600 transition-colors block">{{$ct.Name}}</a>
                {{else}}
                <span class="text-[13px] font-medium text-slate-600 truncate block">{{$ct.Name}}</span>
                {{end}}
                {{if $ct.Domain}}
                <span class="text-[10px] font-mono text-indigo-400/70 truncate block">{{$ct.Domain}}</span>
                {{else if $ct.RepoName}}
                <span class="text-[10px] text-slate-300 truncate block">{{$ct.RepoName}}</span>
                {{else}}
                <span class="text-[10px] text-slate-300 font-mono truncate block">{{$ct.Image}}</span>
                {{end}}
            </div>
            {{if $ct.ShortPorts}}
            <span class="text-[10px] font-mono text-slate-400 bg-slate-100/80 px-1.5 py-0.5 rounded-md shrink-0">{{$ct.ShortPorts}}</span>
            {{end}}
        </div>
        {{end}}
    </div>
    {{else}}
    <div class="text-center py-8 px-4">
        <div class="inline-flex items-center justify-center w-10 h-10 rounded-xl bg-slate-50 mb-3">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-slate-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" /></svg>
        </div>
        <p class="text-[12px] text-slate-400">No containers running</p>
    </div>
    {{end}}
</div>