<div class="group rounded-lg border border-slate-200 hover:border-slate-300 hover:shadow-sm transition-all p-4 relative overflow-hidden">
    <div class="absolute left-0 top-0 bottom-0 w-[2px]
        {{if eq .Status "running"}}bg-emerald-500
        {{else if eq .Status "building"}}bg-amber-400
        {{else if eq .Status "failed"}}bg-red-500
        {{else}}bg-slate-200{{end}}"></div>

    <div class="pl-2">
        <div class="flex items-start justify-between mb-1">
            <div>
                <h3 class="font-semibold text-sm text-slate-700">{{.Name}}</h3>
                <p class="text-[10px] text-slate-400 font-mono">svc-{{.Slug}} · :{{.Port}}</p>
            </div>
            <span class="badge badge-sm
                {{if eq .Status "running"}}badge-success
                {{else if eq .Status "building"}}badge-warning
                {{else if eq .Status "failed"}}badge-error
                {{else}}badge-ghost{{end}}">{{.Status}}</span>
        </div>

        {{if .Domain}}
        <p class="text-xs text-slate-400 mb-2 truncate font-mono">{{.Domain}}</p>
        {{end}}

        <div class="flex items-center gap-2 mt-2">
            <a href="/services/{{.ID}}" class="btn btn-ghost btn-xs flex-1 text-indigo-500">Details</a>
            {{if eq .Status "running"}}
            <button class="btn btn-ghost btn-xs btn-square text-slate-400 opacity-0 group-hover:opacity-100"
                hx-post="/services/{{.ID}}/restart" hx-target="body" title="Restart">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
            </button>
            {{end}}
        </div>
    </div>
</div>