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

<section>
<h2>Racks</h2>
<div class="grid">
{{range .Racks}}
<a href="/racks/{{.Rack.ID}}" class="card">
    <strong>{{.Rack.Name}}</strong>
    <span>{{.Rack.RackType}} / {{.Rack.Depth}} / {{.Rack.HeightUnits}}U &middot; {{.DeviceCount}} device{{if ne .DeviceCount 1}}s{{end}}</span>
    {{if .Rack.Comment}}<small>{{.Rack.Comment}}</small>{{end}}
</a>
{{else}}
<div class="empty-state">No racks yet. Create one below.</div>
{{end}}
</div>
<details>
<summary>Add Rack</summary>
<form method="POST" action="/racks/add">
    <label>Name <input name="name" required></label>
    <label>Type <select name="rack_type"><option value="network">Network</option><option value="server">Server</option></select></label>
    <label>Depth <select name="depth"><option value="shallow">Shallow</option><option value="deep">Deep</option></select></label>
    <label>Height (U) <input type="number" name="height_units" value="42" min="1" style="width:6em"></label>
    <button type="submit">Create Rack</button>
</form>
</details>
</section>

<section>
<h2>Devices</h2>
<div class="grid">
{{range .Devices}}
<a href="/devices/{{.ID}}" class="card">
    <strong>{{.Name}}</strong>
    {{if .Model}}<span>{{.Model.Manufacturer}} {{.Model.Name}}</span>{{end}}
    {{if .UsageDescription}}<small>{{.UsageDescription}}</small>{{end}}
</a>
{{else}}
<div class="empty-state">No devices yet. Create one or add a rack first.</div>
{{end}}
</div>
<details>
<summary>Create Device</summary>
<form method="POST" action="/devices/add">
    <label>Name <input name="name" required></label>
    <label>Model
        <select name="device_model_id" required>
            <option value="">--</option>
            {{range .AllModels}}<option value="{{.ID}}">{{.Name}}</option>{{end}}
        </select>
    </label>
    <label>Usage <input name="usage_description"></label>
    <label>Comment <input name="comment"></label>
    <label>Location <input name="location"></label>
    <button type="submit">Create Device</button>
</form>
</details>
</section>

{{if .Connections}}
<section>
<h2>Connections</h2>
<table>
<thead><tr><th>Type</th><th>Endpoint A</th><th>Endpoint B</th><th>Labels</th></tr></thead>
<tbody>
{{range .Connections}}
<tr>
    <td>{{if .ConnectionType}}{{.ConnectionType.Name}}{{end}}</td>
    <td>{{if .Device1}}{{.Device1.Name}} [{{.Port1.Name}}]{{end}}</td>
    <td>{{if .Device2}}{{.Device2.Name}} [{{.Port2.Name}}]{{end}}</td>
    <td>{{.Label1}}{{if and .Label1 .Label2}} / {{end}}{{.Label2}}</td>
</tr>
{{end}}
</tbody>
</table>
</section>
{{end}}
{{end}}