@model Device
@{ ViewData["Title"] = $"Edit: {Model.Name}"; }
<div class="row justify-content-center"><div class="col-md-8 col-lg-6"><div class="card"><div class="card-body">
    <form asp-action="Edit" method="post">
        @Html.AntiForgeryToken()
        <input type="hidden" asp-for="Id" /><input type="hidden" asp-for="CreatedAt" />
        <div class="mb-3"><label asp-for="Name" class="form-label">Display Name *</label><input asp-for="Name" class="form-control" required /></div>
        <div class="mb-3"><label asp-for="Slug" class="form-label">URL Slug *</label><div class="input-group"><span class="input-group-text">/</span><input asp-for="Slug" class="form-control font-monospace" /></div><span asp-validation-for="Slug" class="text-danger"></span></div>
        <div class="row g-3 mb-3"><div class="col-6"><label asp-for="ResolutionWidth" class="form-label">Width (px)</label><input asp-for="ResolutionWidth" class="form-control" type="number" min="320" max="7680" /></div><div class="col-6"><label asp-for="ResolutionHeight" class="form-label">Height (px)</label><input asp-for="ResolutionHeight" class="form-control" type="number" min="240" max="4320" /></div></div>
        <div class="mb-3"><label class="form-label">Quick Presets</label><div class="d-flex flex-wrap gap-2"><button type="button" class="btn btn-sm btn-outline-secondary" onclick="setRes(1920,1080)">1080p</button><button type="button" class="btn btn-sm btn-outline-secondary" onclick="setRes(3840,2160)">4K</button><button type="button" class="btn btn-sm btn-outline-secondary" onclick="setRes(1080,1920)">Portrait</button><button type="button" class="btn btn-sm btn-outline-secondary" onclick="setRes(1280,720)">720p</button></div></div>
        <div class="mb-4"><label asp-for="Transition" class="form-label">Transition Effect</label><select asp-for="Transition" class="form-select"><option value="fade">Fade</option><option value="slide">Slide</option><option value="none">None</option></select></div>
        <div class="d-grid gap-2"><button type="submit" class="btn btn-primary btn-lg"><i class="bi bi-check-lg me-1"></i>Save Changes</button><a href="/admin/devices" class="btn btn-outline-secondary">Cancel</a></div>
    </form>
</div></div></div></div>
@section Scripts { <script>function setRes(w,h){document.getElementById('ResolutionWidth').value=w;document.getElementById('ResolutionHeight').value=h;}</script> }