<!-- Routes Panel — collapsible -->
<div class="rounded-2xl bg-base-100/40 backdrop-blur-xl border border-white/[0.06] shadow-xl shadow-black/20 p-5">
    <details>
        <summary class="flex items-center justify-between cursor-pointer select-none">
            <h3 class="text-[10px] font-semibold uppercase tracking-widest text-base-content/30">Routes</h3>
            <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5 text-base-content/20 transition-transform details-open:rotate-90" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
        </summary>
        <div class="mt-3 space-y-1">
            {{if dashboard.Routes}}
            {{range $route := dashboard.Routes}}
            <div class="flex items-center gap-3 rounded-lg px-3 py-1.5 text-xs">
                {{if $route.Active}}
                <span class="w-1.5 h-1.5 rounded-full bg-success/50 shrink-0"></span>
                {{else}}
                <span class="w-1.5 h-1.5 rounded-full bg-base-content/15 shrink-0"></span>
                {{end}}
                <span class="text-base-content/40 truncate flex-1 font-mono">{{$route.Host}}</span>
                <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 text-base-content/15 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3" /></svg>
                <span class="text-base-content/25 font-mono shrink-0">{{$route.Target}}:{{$route.Port}}</span>
                {{if $route.System}}
                <span class="text-[9px] text-base-content/15 border border-base-content/10 rounded px-1">sys</span>
                {{else}}
                <button class="btn btn-ghost btn-xs btn-square text-error/30 opacity-0 hover:opacity-100"
                    hx-post="/routes/{{$route.ID}}/delete" hx-confirm="Remove route for {{$route.Host}}?" hx-target="body">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
                </button>
                {{end}}
            </div>
            {{end}}

            <!-- Add route inline -->
            <form hx-post="/routes/add" hx-target="body" class="flex items-center gap-2 mt-2 pt-2 border-t border-white/[0.04]">
                <input type="text" name="host" class="input input-xs input-bordered flex-1 min-w-0" placeholder="domain" required />
                <input type="text" name="target" class="input input-xs input-bordered w-20" placeholder="target" required />
                <input type="number" name="port" class="input input-xs input-bordered w-16" placeholder="port" required />
                <button type="submit" class="btn btn-ghost btn-xs shrink-0">+</button>
            </form>
            {{else}}
            <p class="text-xs text-base-content/20">No routes configured</p>
            {{end}}
        </div>
    </details>
</div>