@model List<Device>
@{ Layout = null; }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Post Not Found — Sunbeam</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
    <style>
        body { background: #0f0f1a; color: #e0e0e0; min-height: 100vh; display: flex; align-items: center; justify-content: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
        .container { text-align: center; max-width: 500px; }
        h1 { font-size: 2.5em; margin-bottom: 0.3em; }
        .device-list a { display: block; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 1em; margin: 0.5em 0; color: #7eb8ff; text-decoration: none; transition: all 0.2s; }
        .device-list a:hover { background: rgba(255,255,255,0.1); transform: translateX(4px); }
    </style>
</head>
<body>
    <div class="container">
        <h1>Meow?</h1>
        <p class="text-muted mb-4">No post found at this address.</p>
        @if (Model.Any()) {
            <h5 class="mb-3">Available Posts:</h5>
            <div class="device-list">@foreach (var d in Model) { <a href="/@d.Slug"><strong>@d.Name</strong><br /><code>/@d.Slug</code></a> }</div>
        } else { <p>No devices configured yet.</p> }
        <p class="mt-4"><a href="/admin" class="btn btn-outline-light btn-sm">Go to Admin</a></p>
    </div>
</body>
</html>
