{{define "content"}}
<h1>Wall Sockets</h1>
{{if .Error}}<div class="alert alert-error">{{.Error}}</div>{{end}}

<table>
<thead><tr><th>Name</th><th>Location</th><th>Model</th><th>Comment</th><th>Ports</th><th></th></tr></thead>
<tbody>
{{range .Sockets}}
<tr>
    <td><a href="/devices/{{.ID}}">{{.Name}}</a></td>
    <td>{{.Location}}</td>
    <td>{{if .Model}}{{.Model.Name}}{{end}}</td>
    <td>{{.Comment}}</td>
    <td>
        {{range .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="port {{if ne $bg ""}}connected{{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);}"
              onclick="if(!connectMode){openModal();htmx.ajax('GET','/connections/{{.ID}}',{target:'#modal-content',swap:'innerHTML'});}else{portClick(this,{{.ID}},event);}"
              title="{{.Name}}">
            {{.Name}}
        </span>
        {{end}}
    </td>
    <td>
        <form method="POST" action="/wall-sockets/{{.ID}}/delete" style="display:inline" onsubmit="return confirm('Delete?')">
            <button class="btn-sm btn-danger">Delete</button>
        </form>
    </td>
</tr>
{{end}}
</tbody>
</table>

<details>
<summary>Add Wall Socket</summary>
<form method="POST" action="/wall-sockets/add">
    <label>Name <input name="name" required></label>
    <label>Model
        <select name="device_model_id" required>
            <option value="">--</option>
            {{range .Models}}<option value="{{.ID}}">{{.Name}}</option>{{end}}
        </select>
    </label>
    <label>Location <input name="location" placeholder="e.g. Room 4.2"></label>
    <label>Comment <input name="comment"></label>
    <button type="submit">Add</button>
</form>
</details>
{{end}}