{{ template "account_shell_start" . }}
<main class="account-window" aria-labelledby="account-dashboard-title">
    {{ template "account_window_titlebar" . }}

    <nav class="menu-bar" aria-label="Dashboard toolbar">
        <div class="menu-item">
            <button class="menu-button" type="button" aria-expanded="false">File</button>
            <div class="menu-popup" role="menu">
                <a class="menu-action" href="/account"><span>R</span><span>Refresh dashboard</span><span class="shortcut">F5</span></a>
                <div class="menu-separator"></div>
                <form action="/account/logout" method="post">
                    {{ template "account_csrf_field" . }}
                    <button class="menu-action" type="submit"><span>Q</span><span>Log out</span><span></span></button>
                </form>
            </div>
        </div>
        <div class="menu-item">
            <button class="menu-button" type="button" aria-expanded="false">View</button>
            <div class="menu-popup" role="menu">
                <a class="menu-action" href="#alerts"><span>!</span><span>Go to alerts</span><span></span></a>
                <a class="menu-action" href="#recent-boxes"><span>B</span><span>Go to recent boxes</span><span></span></a>
                <a class="menu-action" href="#recent-activity"><span>T</span><span>Go to recent activity</span><span></span></a>
            </div>
        </div>
        <div class="menu-item">
            <button class="menu-button" type="button" aria-expanded="false">Tools</button>
            <div class="menu-popup" role="menu">
                <a class="menu-action" href="/account/boxes"><span>B</span><span>Boxes</span><span></span></a>
                <a class="menu-action" href="/account/alerts"><span>!</span><span>Alerts</span><span></span></a>
                {{ if .CanManageUsers }}
                    <a class="menu-action" href="/account/users"><span>U</span><span>Users</span><span></span></a>
                {{ end }}
                {{ if .CanViewSettings }}
                    <a class="menu-action" href="/account/settings"><span>S</span><span>Settings</span><span></span></a>
                {{ end }}
            </div>
        </div>
    </nav>

    <div class="account-body-content">
        <section class="dashboard-hero raised-panel" aria-labelledby="account-dashboard-title">
            <div class="hero-copy">
                <h2 id="account-dashboard-title">Dashboard</h2>
                <p>Account overview for boxes, alerts, storage, users, and recent activity.</p>
            </div>
            <div class="hero-status" aria-label="System summary">
                {{ range .Statuses }}
                    <div class="hero-status-row"><span>{{ .Label }}</span><strong class="status-{{ .Severity }}">{{ .Value }}</strong></div>
                {{ end }}
            </div>
        </section>

        <section class="stats-grid" aria-label="Dashboard statistics">
            <article class="stat-card sunken-panel is-info">
                <p class="stat-label">Active boxes</p>
                <p class="stat-value">{{ .Stats.ActiveBoxes }}</p>
                <p class="stat-note"><span class="stat-note-pill">live filesystem scan</span></p>
            </article>
            <article class="stat-card sunken-panel is-info">
                <p class="stat-label">Storage used</p>
                <p class="stat-value">{{ .Stats.StorageUsedLabel }}</p>
                <p class="stat-note"><span class="stat-note-pill">local backend</span></p>
            </article>
            <article class="stat-card sunken-panel is-warning">
                <p class="stat-label">Alerts</p>
                <p class="stat-value">{{ .Stats.AlertCount }}</p>
                <p class="stat-note"><span class="stat-note-pill">alert model pending</span></p>
            </article>
            {{ if .ShowUsersStat }}
                <article class="stat-card sunken-panel is-ok">
                    <p class="stat-label">Users</p>
                    <p class="stat-value">{{ .Stats.TotalUsers }}</p>
                    <p class="stat-note"><span class="stat-note-pill">{{ .Stats.ActiveUsers }} active</span><span class="stat-note-pill">{{ .Stats.DisabledUsers }} disabled</span></p>
                </article>
            {{ end }}
        </section>

        <section class="main-grid" aria-label="Dashboard panels">
            <article id="alerts" class="win98-window section-window">
                <div class="win98-titlebar">
                    <div class="win98-titlebar-label">
                        <span class="win98-titlebar-icon">!</span>
                        <h2>Alerts Preview</h2>
                    </div>
                    <div class="titlebar-actions">
                        <a class="titlebar-link-button" href="/account/alerts">Show all</a>
                    </div>
                </div>
                <div class="section-body sunken-panel">
                    <div class="scroll-panel alerts-scroll">
                        <div class="alert-list">
                            {{ range .Alerts }}
                                <div class="alert-row">
                                    <span class="badge is-{{ .Severity }}">{{ .Severity }}</span>
                                    <div>
                                        <p class="alert-title">{{ .Title }}</p>
                                        <p class="alert-desc">{{ .Detail }}</p>
                                    </div>
                                    <div class="alert-actions">
                                        <a class="tiny-button" href="/account/alerts">Open</a>
                                    </div>
                                </div>
                            {{ else }}
                                <div class="alert-row">
                                    <span class="badge is-ok">ok</span>
                                    <div><p class="alert-title">No alerts</p><p class="alert-desc">Nothing needs attention.</p></div>
                                </div>
                            {{ end }}
                        </div>
                    </div>
                </div>
            </article>

            <article id="recent-boxes" class="win98-window section-window">
                <div class="win98-titlebar">
                    <div class="win98-titlebar-label">
                        <span class="win98-titlebar-icon">B</span>
                        <h2>Recent Boxes</h2>
                    </div>
                    <div class="titlebar-actions">
                        <a class="titlebar-link-button" href="/account/boxes">Show all</a>
                    </div>
                </div>
                <div class="section-body sunken-panel">
                    <div class="scroll-panel boxes-scroll">
                        <table class="account-table">
                            <thead>
                                <tr>
                                    <th>Box</th>
                                    <th>Files</th>
                                    <th>Size</th>
                                    <th>Created</th>
                                    <th>Expires</th>
                                    <th>Flags</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {{ range .RecentBoxes }}
                                    <tr>
                                        <td>{{ .ID }}</td>
                                        <td>{{ .FileCount }}</td>
                                        <td>{{ .TotalSizeLabel }}</td>
                                        <td>{{ .CreatedAt }}</td>
                                        <td>{{ .ExpiresAt }}</td>
                                        <td>{{ .Flags }}</td>
                                        <td>
                                            <div class="box-actions">
                                                <a class="tiny-button" href="/box/{{ .ID }}">Open</a>
                                                {{ if .CanManage }}
                                                    <a class="tiny-button" href="/account/boxes/{{ .ID }}">Manage</a>
                                                {{ end }}
                                            </div>
                                        </td>
                                    </tr>
                                {{ else }}
                                    <tr><td colspan="7">No boxes found.</td></tr>
                                {{ end }}
                            </tbody>
                        </table>
                    </div>
                </div>
            </article>

            <article id="recent-activity" class="win98-window section-window span-2">
                <div class="win98-titlebar">
                    <div class="win98-titlebar-label">
                        <span class="win98-titlebar-icon">T</span>
                        <h2>Recent Activity</h2>
                    </div>
                </div>
                <div class="section-body sunken-panel">
                    <div class="scroll-panel activity-scroll">
                        <div class="activity-list">
                            {{ range .RecentActivity }}
                                <div class="activity-row">
                                    <span class="activity-time">{{ .Time }}</span>
                                    <div>
                                        <p class="activity-title">{{ .Title }}</p>
                                        <p class="activity-meta">{{ .Meta }}</p>
                                    </div>
                                    <span class="tag info">account</span>
                                </div>
                            {{ end }}
                        </div>
                    </div>
                </div>
            </article>
        </section>
    </div>

    <footer class="win98-statusbar" aria-label="Dashboard status">
        <span>signed in: {{ .AccountNav.Username }}</span>
        <span>{{ if .AccountNav.IsAdmin }}admin{{ else }}account{{ end }}</span>
        <span>ready</span>
    </footer>
</main>
{{ template "account_shell_end" . }}