{{define "content"}}
<h1>{{.Rack.Name}} <small>({{.Rack.RackType}} / {{.Rack.Depth}} / {{.Rack.HeightUnits}}U)</small></h1>
{{if .Error}}<div class="alert alert-error">{{.Error}}</div>{{end}}
{{if .Rack.Comment}}<p class="comment">{{.Rack.Comment}}</p>{{end}}

<div class="rack-toolbar">
    <form method="POST" action="/racks/{{.Rack.ID}}/delete" onsubmit="return confirm('Delete this rack?')" style="display:inline">
        <button class="btn-danger">Delete Rack</button>
    </form>
    <details style="display:inline">
        <summary>Edit</summary>
        <form method="POST" action="/racks/{{.Rack.ID}}/edit" class="inline-form">
            <label>Name <input name="name" value="{{.Rack.Name}}" required></label>
            <label>Type <select name="rack_type"><option value="network" {{if eq .Rack.RackType "network"}}selected{{end}}>Network</option><option value="server" {{if eq .Rack.RackType "server"}}selected{{end}}>Server</option></select></label>
            <label>Depth <select name="depth"><option value="shallow" {{if eq .Rack.Depth "shallow"}}selected{{end}}>Shallow</option><option value="deep" {{if eq .Rack.Depth "deep"}}selected{{end}}>Deep</option></select></label>
            <label>Height (U) <input type="number" name="height_units" value="{{.Rack.HeightUnits}}" min="1"></label>
            <label>Comment <input name="comment" value="{{.Rack.Comment}}"></label>
            <button type="submit">Update</button>
        </form>
    </details>
</div>

<table class="rack-table">
<thead><tr><th>U</th><th>Front</th><th>U</th><th>Back</th></tr></thead>
<tbody>
{{range $i, $fs := .FrontSlots}}
<tr {{if or $fs.IsStart (index $.BackSlots $i).IsStart}}class="device-start"{{end}}>
    <td class="unit-num">{{$fs.Unit}}</td>
    <td class="rack-cell">
        {{if $fs.IsStart}}
        <div class="rack-device">
            <a href="/devices/{{$fs.Device.ID}}"><strong>{{$fs.Device.Name}}</strong></a>
            {{if $fs.Device.Model}}<small>{{$fs.Device.Model.Manufacturer}} {{$fs.Device.Model.Name}} ({{$fs.Height}}U)</small>{{end}}
            {{if $fs.Device.UsageDescription}}<small>{{$fs.Device.UsageDescription}}</small>{{end}}
        </div>
        {{end}}
    </td>
    <td class="unit-num">{{(index $.BackSlots $i).Unit}}</td>
    <td class="rack-cell">
        {{if (index $.BackSlots $i).IsStart}}
        <div class="rack-device">
            <a href="/devices/{{(index $.BackSlots $i).Device.ID}}"><strong>{{(index $.BackSlots $i).Device.Name}}</strong></a>
            {{if (index $.BackSlots $i).Device.Model}}<small>{{(index $.BackSlots $i).Device.Model.Manufacturer}} {{(index $.BackSlots $i).Device.Model.Name}} ({{(index $.BackSlots $i).Height}}U)</small>{{end}}
        </div>
        {{end}}
    </td>
</tr>
{{end}}
</tbody>
</table>

<h3>Devices &amp; Ports</h3>
{{range .RackedDevices}}
<div class="device-section">
    <h4>
        <a href="/devices/{{.ID}}">{{.Name}}</a>
        {{if .Model}}({{.Model.Manufacturer}} {{.Model.Name}}){{end}}
        &mdash; U{{.RackUnitStart}} {{.RackSide}}
        <form method="POST" action="/racks/{{$.Rack.ID}}/devices/{{.ID}}/remove" style="display:inline">
            <button class="btn-sm btn-danger">Remove</button>
        </form>
    </h4>
    {{template "port_list" dict "Device" . "Connections" $.Connections}}
</div>
{{end}}

{{if .UnrackedDevices}}
<h3>Unplaced Devices in Rack</h3>
{{range .UnrackedDevices}}
<div class="device-section">
    <h4>
        <a href="/devices/{{.ID}}">{{.Name}}</a>
        {{if .Model}}({{.Model.Manufacturer}} {{.Model.Name}}){{end}}
        <form method="POST" action="/racks/{{$.Rack.ID}}/devices/{{.ID}}/remove" style="display:inline">
            <button class="btn-sm btn-danger">Remove</button>
        </form>
    </h4>
    {{template "port_list" dict "Device" . "Connections" $.Connections}}
</div>
{{end}}
{{end}}

<details>
<summary>Add Device to Rack</summary>
<div style="margin-bottom:1em">
    <form method="POST" action="/racks/{{.Rack.ID}}/devices/add/racked">
        <label>Place at specific rack unit:</label>
        <label>Device <select name="device_id" style="width:auto"><option value="">--</option>
        {{range .AllDevices}}
        {{if .Model}}{{if .Model.IsRackMountable}}
        <option value="{{.ID}}">{{.Name}} ({{.Model.Name}})</option>
        {{end}}{{end}}
        {{end}}
        </select></label>
        <label>Unit <input type="number" name="rack_unit_start" value="1" min="1" max="{{.Rack.HeightUnits}}" style="width:5em"></label>
        <label>Side <select name="rack_side" style="width:auto"><option value="front">Front</option><option value="back">Back</option></select></label>
        <button type="submit">Place</button>
    </form>
</div>
<div>
    <form method="POST" action="/racks/{{.Rack.ID}}/devices/add/unracked">
        <label>Add unplaced (in-rack list):</label>
        <label>Device <select name="device_id" style="width:auto"><option value="">--</option>
        {{range .AllDevices}}
        <option value="{{.ID}}">{{.Name}} {{if .Model}}({{.Model.Name}}){{end}}</option>
        {{end}}
        </select></label>
        <button type="submit">Add</button>
    </form>
</div>
</details>
{{end}}