{{define "power_strip"}}
<div class="power-strip-outlets">
    {{range .Device.Ports}}
    {{$pid := .ID}}
    {{$color := "#333"}}{{$bg := ""}}
    {{range $.Connections}}{{if and .Port1 .Port2}}{{if eq .Port1.ID $pid}}{{$color = .Color}}{{$bg = .Color}}{{else if eq .Port2.ID $pid}}{{$color = .Color}}{{$bg = .Color}}{{end}}{{end}}{{end}}
    <span class="outlet {{if ne $bg ""}}outlet-used{{end}}"
          style="{{if ne $bg ""}}border-color:{{$color}};background:{{$color}}22{{end}}"
          data-port-id="{{.ID}}"
          onclick="if(!connectMode){openModal();htmx.ajax('GET','/connections/{{.ID}}',{target:'#modal-content',swap:'innerHTML'});}else{portClick(this,{{.ID}},event);}"
          title="Outlet: {{.Name}}">
        <span class="outlet-icon">&#x1F50C;</span>
        <span class="outlet-label">{{.Name}}</span>
    </span>
    {{end}}
</div>
{{end}}