{{define "content"}}
<h1>{{if .IsEdit}}Edit{{else}}Create{{end}} Device Model</h1>
{{if .Error}}<div class="alert alert-error">{{.Error}}</div>{{end}}

<form method="POST" action="{{if .IsEdit}}/models/{{.Model.ID}}/update{{else}}/models/create{{end}}" enctype="multipart/form-data" id="model-form">
    <fieldset>
        <label>Name <input name="name" value="{{if .Model}}{{.Model.Name}}{{end}}" required></label>
        <label>Manufacturer <input name="manufacturer" value="{{if .Model}}{{.Model.Manufacturer}}{{end}}"></label>
    </fieldset>

    <fieldset>
        <label>
            <input type="checkbox" name="is_rack_mountable" id="chk-rack" onchange="toggleRackHeight()"
                {{if not .Model}}checked{{else if .Model.IsRackMountable}}checked{{end}}>
            Rack-mountable
        </label>
        <label id="lbl-height">Height (U) <input type="number" name="height_units" value="{{if .Model}}{{if .Model.HeightUnits}}{{.Model.HeightUnits}}{{end}}{{end}}" min="1" style="width:5em"></label>
    </fieldset>

    <fieldset>
        <label>
            <input type="checkbox" name="is_patch_panel" id="chk-patch" onchange="togglePatchMode()"
                {{if .Model}}{{if .Model.IsPatchPanel}}checked{{end}}{{end}}>
            Patch panel <small>(ports auto-doubled front+back at device creation)</small>
        </label>
        <label>
            <input type="checkbox" name="is_wall_socket" id="chk-wall"
                {{if .Model}}{{if .Model.IsWallSocket}}checked{{end}}{{end}}>
            Wall socket <small>(behaves like patch panel)</small>
        </label>
        <label>
            <input type="checkbox" name="is_power_strip" id="chk-power"
                {{if .Model}}{{if .Model.IsPowerStrip}}checked{{end}}{{end}}>
            Power strip <small>(outlets shown as socket grid in rack view)</small>
        </label>
        <div id="patch-note" style="display:none;color:var(--text-muted);font-size:0.85em;margin-top:0.3em">
            Port side selectors disabled &mdash; patch panels create front+back pairs from every port regardless of side.
        </div>
    </fieldset>

    <fieldset>
        <label>Front image <input type="file" name="front_image" accept="image/*">
        {{if .Model}}{{if .Model.FrontImage}}<br><a href="/{{.Model.FrontImage}}" target="_blank">Current: {{.Model.FrontImage}}</a>{{end}}{{end}}
        </label>
        <label>Back image <input type="file" name="back_image" accept="image/*">
        {{if .Model}}{{if .Model.BackImage}}<br><a href="/{{.Model.BackImage}}" target="_blank">Current: {{.Model.BackImage}}</a>{{end}}{{end}}
        </label>
    </fieldset>

    <h3>Ports</h3>
    <div id="ports-container">
    {{if .Model}}
    {{range $i, $p := .Model.Ports}}
    <div class="port-entry">
        <input name="port_name" value="{{.Name}}" placeholder="Port name (e.g. Gig1/0/1)">
        <select name="port_side" class="port-side-sel"><option value="front" {{if eq .Side "front"}}selected{{end}}>Front</option><option value="back" {{if eq .Side "back"}}selected{{end}}>Back</option></select>
        <button type="button" onclick="this.parentElement.remove()">Remove</button>
    </div>
    {{end}}
    {{end}}
    </div>
    <button type="button" onclick="addPortRow()">Add Port</button>

    <div style="margin-top:1em">
        <button type="submit" class="btn">{{if .IsEdit}}Update{{else}}Create{{end}} Model</button>
        <a href="/models" class="btn">Cancel</a>
    </div>
</form>

<script>
function toggleRackHeight() {
    var show = document.getElementById('chk-rack').checked;
    document.getElementById('lbl-height').style.display = show ? '' : 'none';
}
function togglePatchMode() {
    var patch = document.getElementById('chk-patch').checked;
    document.getElementById('patch-note').style.display = patch ? '' : 'none';
    document.querySelectorAll('.port-side-sel').forEach(function(sel) {
        sel.disabled = patch;
        sel.style.opacity = patch ? '0.5' : '';
    });
}
function addPortRow() {
    var patch = document.getElementById('chk-patch').checked;
    var div = document.createElement('div');
    div.className = 'port-entry';
    div.innerHTML = '<input name="port_name" placeholder="Port name"> <select name="port_side" class="port-side-sel"' + (patch ? ' disabled style="opacity:0.5"' : '') + '><option value="front">Front</option><option value="back">Back</option></select> <button type="button" onclick="this.parentElement.remove()">Remove</button>';
    document.getElementById('ports-container').appendChild(div);
}
toggleRackHeight();
togglePatchMode();
</script>
{{end}}