{{define "port_list"}}
<div class="ports">
    <div class="port-column">
        <h5>Front</h5>
        {{range .Device.Ports}}{{if eq .Side "front"}}
        {{$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="port {{if ne $bg ""}}connected{{end}}"
              style="{{if ne $bg ""}}border-color:{{$color}};background:{{$color}}22{{end}}"
              hx-get="/connections/{{.ID}}" 
              hx-target="#modal-content"
              hx-trigger="click"
              onclick="openModal()"
              title="{{.Name}}">
            {{.Name}}
        </span>
        {{end}}{{end}}
    </div>
    <div class="port-column">
        <h5>Back</h5>
        {{range .Device.Ports}}{{if eq .Side "back"}}
        {{$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="port {{if ne $bg ""}}connected{{end}}"
              style="{{if ne $bg ""}}border-color:{{$color}};background:{{$color}}22{{end}}"
              hx-get="/connections/{{.ID}}" 
              hx-target="#modal-content"
              hx-trigger="click"
              onclick="openModal()"
              title="{{.Name}}">
            {{.Name}}
        </span>
        {{end}}{{end}}
    </div>
</div>
{{end}}