{{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>

<div class="rack-layout">
    <div class="rack-panel">
        <h3>Front</h3>
        {{range .FrontSlots}}
        <div class="rack-slot {{if .Device}}occupied{{end}}" style="{{if .IsStart}}border-top:2px solid #444;{{end}} min-height:28px;">
            <span class="unit-num">{{.Unit}}</span>
            {{if .IsStart}}
            <div class="rack-device">
                <a href="/devices/{{.Device.ID}}"><strong>{{.Device.Name}}</strong></a>
                {{if .Device.Model}}<small>{{.Device.Model.Manufacturer}} {{.Device.Model.Name}} ({{.Height}}U)</small>{{end}}
                {{if .Device.UsageDescription}}<small>{{.Device.UsageDescription}}</small>{{end}}
            </div>
            {{end}}
        </div>
        {{end}}
    </div>
    <div class="rack-panel">
        <h3>Back</h3>
        {{range .BackSlots}}
        <div class="rack-slot {{if .Device}}occupied{{end}}" style="{{if .IsStart}}border-top:2px solid #444;{{end}} min-height:28px;">
            <span class="unit-num">{{.Unit}}</span>
            {{if .IsStart}}
            <div class="rack-device">
                <a href="/devices/{{.Device.ID}}"><strong>{{.Device.Name}}</strong></a>
                {{if .Device.Model}}<small>{{.Device.Model.Manufacturer}} {{.Device.Model.Name}} ({{.Height}}U)</small>{{end}}
            </div>
            {{end}}
        </div>
        {{end}}
    </div>
</div>

<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}}