@{
    ViewData["Title"] = "Dashboard";
    var devices = ViewBag.Devices as List<Device>;
}

<div class="row g-4 mb-4">
    <div class="col-md-4">
        <div class="stat-card">
            <div class="stat-icon"><i class="bi bi-layers"></i></div>
            <div class="stat-info">
                <div class="stat-value">@ViewBag.SlideCount</div>
                <div class="stat-label">Meows (Slides)</div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="stat-card">
            <div class="stat-icon"><i class="bi bi-display"></i></div>
            <div class="stat-info">
                <div class="stat-value">@ViewBag.DeviceCount</div>
                <div class="stat-label">Kittens (Devices)</div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="stat-card accent">
            <div class="stat-icon"><i class="bi bi-sun"></i></div>
            <div class="stat-info">
                <div class="stat-value">Sunbeam</div>
                <div class="stat-label">Framework Active</div>
            </div>
        </div>
    </div>
</div>

<div class="row g-4">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="bi bi-display me-2"></i>Active Kittens</h5>
                <a href="/admin/devices/create" class="btn btn-sm btn-primary"><i class="bi bi-plus-lg me-1"></i>Add</a>
            </div>
            <div class="card-body p-0">
                @if (devices != null && devices.Any())
                {
                    <div class="list-group list-group-flush">
                        @foreach (var device in devices)
                        {
                            <div class="list-group-item d-flex justify-content-between align-items-center">
                                <div>
                                    <strong>@device.Name</strong><br />
                                    <small class="text-muted">
                                        <i class="bi bi-link-45deg"></i> <code>/@device.Slug</code>
                                        &nbsp;·&nbsp; @(device.ResolutionWidth)x@(device.ResolutionHeight)
                                        &nbsp;·&nbsp; @device.DeviceSlides.Count meow(s)
                                    </small>
                                </div>
                                <div class="btn-group btn-group-sm">
                                    <a href="/admin/devices/playlist/@device.Id" class="btn btn-outline-primary" title="Edit Playlist"><i class="bi bi-music-note-list"></i></a>
                                    <a href="/@device.Slug" target="_blank" class="btn btn-outline-success" title="View Display"><i class="bi bi-box-arrow-up-right"></i></a>
                                </div>
                            </div>
                        }
                    </div>
                }
                else
                {
                    <div class="p-4 text-center text-muted">
                        <i class="bi bi-display" style="font-size:2em;"></i>
                        <p class="mt-2">No kittens configured yet.</p>
                        <a href="/admin/devices/create" class="btn btn-primary btn-sm">Create your first kitten</a>
                    </div>
                }
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header"><h5 class="mb-0"><i class="bi bi-book me-2"></i>Terminology Guide</h5></div>
            <div class="card-body">
                <table class="table table-sm mb-0">
                    <tbody>
                        <tr><td><strong>Meow</strong></td><td>An individual slide</td></tr>
                        <tr><td><strong>PURR</strong></td><td>Persistent User Requests &amp; Reminders — a playlist</td></tr>
                        <tr><td><strong>ASK</strong></td><td>Attention Seeking Kitty — priority override</td></tr>
                        <tr><td><strong>Kitten</strong></td><td>A display node/device</td></tr>
                        <tr><td><strong>Scratching Post</strong></td><td>This backend</td></tr>
                        <tr><td><strong>Sunbeam</strong></td><td>The framework</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>