{{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}}
        <span class="port"
              hx-get="/connections/{{.ID}}"
              hx-target="#modal-content"
              hx-trigger="click"
              onclick="openModal()"
              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}}