@model Device
@{ ViewData["Title"] = "New Post"; }
<div class="row justify-content-center"><div class="col-md-8 col-lg-6"><div class="card"><div class="card-body">
    <form asp-action="Create" method="post">
        @Html.AntiForgeryToken()
        <div class="mb-3"><label asp-for="Name" class="form-label">Display Name *</label><input asp-for="Name" class="form-control" placeholder="e.g. Front of House" required /><span asp-validation-for="Name" class="text-danger"></span></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" placeholder="frontofhouse" /></div><div class="form-text">Lowercase, no spaces. Auto-generated from name if left empty.</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>Create Post</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;}
        document.getElementById('Name').addEventListener('input',function(){var s=document.getElementById('Slug');if(!s.dataset.manual)s.value=this.value.toLowerCase().replace(/[^a-z0-9]+/g,'').substring(0,50);});
        document.getElementById('Slug').addEventListener('input',function(){this.dataset.manual='true';});
    </script>
}