{{ define "admin/alerts.html" }}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>WarpBox Admin Alerts</title>
    <link rel="icon" type="image/png" href="/static/WarpBoxLogo.png">
    <link rel="stylesheet" href="/static/css/app.css">
    <link rel="stylesheet" href="/static/css/window.css">
    <link rel="stylesheet" href="/static/css/components/buttons.css">
    <link rel="stylesheet" href="/static/css/components/toast.css">
    <link rel="stylesheet" href="/static/css/admin.css">
    <link rel="stylesheet" href="/static/css/alerts.css">
</head>
<body>
    <div class="admin-shell">
        <div class="admin-frame">
            {{ template "admin/header.html" . }}

            <div class="win98-window admin-workspace-window" role="main">
                <div class="win98-titlebar">
                    <div class="win98-titlebar-label">
                        <img class="win98-titlebar-icon" src="/static/WarpBoxLogo.png" alt="" aria-hidden="true">
                        <h1>WarpBox Alerts</h1>
                    </div>
                    <div class="win98-window-controls" aria-hidden="true">
                        <button class="win98-control" type="button">_</button>
                        <button class="win98-control" type="button">□</button>
                        <button class="win98-control" type="button">x</button>
                    </div>
                </div>

                <nav class="menu-bar" aria-label="Alerts toolbar">
                    <div class="menu-item">
                        <button class="menu-button" type="button" aria-expanded="false">File</button>
                        <div class="menu-popup">
                            <button class="menu-action" type="button" data-command="refresh"><span>R</span><span>Refresh alerts</span><span class="shortcut">F5</span></button>
                            <button class="menu-action" type="button" data-command="export"><span>E</span><span>Export visible alerts</span><span></span></button>
                        </div>
                    </div>
                    <div class="menu-item">
                        <button class="menu-button" type="button" aria-expanded="false">Alerts</button>
                        <div class="menu-popup">
                            <button class="menu-action" type="button" data-command="ack"><span>A</span><span>Acknowledge selected</span><span></span></button>
                            <button class="menu-action" type="button" data-command="close"><span>C</span><span>Close selected</span><span></span></button>
                            <div class="menu-separator"></div>
                            <button class="menu-action" type="button" data-command="open-only"><span>O</span><span>Show open only</span><span></span></button>
                        </div>
                    </div>
                    <div class="menu-item">
                        <button class="menu-button" type="button" aria-expanded="false">Help</button>
                        <div class="menu-popup">
                            <button class="menu-action" type="button" data-command="help-codes"><span>?</span><span>Tracing and codes</span><span></span></button>
                            <button class="menu-action" type="button" data-command="help-meta"><span>I</span><span>Metadata preview</span><span></span></button>
                        </div>
                    </div>
                </nav>

                <div class="admin-workspace-body alerts-page-body">
                    <section class="alerts-summary-grid" aria-label="Alerts summary">
                        <article class="alerts-stat-card is-danger">
                            <p class="alerts-stat-label">Open alerts</p>
                            <p class="alerts-stat-value" data-open-count>{{ .OpenCount }}</p>
                            <p class="alerts-stat-note">Requires attention</p>
                        </article>
                        <article class="alerts-stat-card is-warning">
                            <p class="alerts-stat-label">High severity</p>
                            <p class="alerts-stat-value" data-high-count>{{ .HighCount }}</p>
                            <p class="alerts-stat-note">Escalate first</p>
                        </article>
                        <article class="alerts-stat-card is-info">
                            <p class="alerts-stat-label">Acknowledged</p>
                            <p class="alerts-stat-value" data-ack-count>{{ .AckCount }}</p>
                            <p class="alerts-stat-note">Seen but not closed</p>
                        </article>
                        <article class="alerts-stat-card is-info">
                            <p class="alerts-stat-label">Closed today</p>
                            <p class="alerts-stat-value" data-closed-count>{{ .ClosedCount }}</p>
                            <p class="alerts-stat-note">History stays lightweight</p>
                        </article>
                    </section>

                    <section class="alerts-content-grid">
                        <div class="alerts-column">
                            <section class="alerts-panel alerts-list-panel">
                                <div class="alerts-panel-header">
                                    <div class="alerts-panel-title">Alert list <span class="alerts-panel-sub">search, filter, review</span></div>
                                    <div class="alerts-panel-tools">
                                        <button class="win98-button alerts-tool-button" type="button" data-command="ack">Acknowledge</button>
                                        <button class="win98-button alerts-tool-button" type="button" data-command="close">Close</button>
                                    </div>
                                </div>
                                <div class="alerts-panel-body">
                                    <div class="alerts-toolbar-grid">
                                        <input class="alerts-input" id="search-input" type="search" placeholder="Search title, code, trace or text">
                                        <select class="alerts-select" id="severity-filter">
                                            <option value="all" selected>All severities</option>
                                            <option value="low">Low</option>
                                            <option value="medium">Medium</option>
                                            <option value="high">High</option>
                                        </select>
                                        <select class="alerts-select" id="status-filter">
                                            <option value="all" selected>All statuses</option>
                                            <option value="open">Open</option>
                                            <option value="acked">Acknowledged</option>
                                            <option value="closed">Closed</option>
                                        </select>
                                        <select class="alerts-select" id="source-filter">
                                            <option value="all" selected>All groups</option>
                                            <option value="thumbnails">Thumbnails</option>
                                            <option value="storage">Storage</option>
                                            <option value="uploads">Uploads</option>
                                            <option value="auth">Auth</option>
                                        </select>
                                        <select class="alerts-select" id="sort-filter">
                                            <option value="newest" selected>Newest first</option>
                                            <option value="severity">Severity first</option>
                                            <option value="oldest">Oldest first</option>
                                        </select>
                                    </div>

                                    <div class="alerts-table-wrap">
                                        <table class="alerts-table">
                                            <thead>
                                                <tr>
                                                    <th class="alerts-col-check"><input type="checkbox" id="select-all"></th>
                                                    <th>Title</th>
                                                    <th class="alerts-col-severity">Severity</th>
                                                    <th class="alerts-col-status">Status</th>
                                                    <th class="alerts-col-code">Code</th>
                                                    <th>Trace</th>
                                                    <th class="alerts-col-time">Created</th>
                                                    <th class="alerts-col-actions">Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody id="alerts-body"></tbody>
                                        </table>
                                    </div>
                                </div>
                            </section>
                        </div>

                        <div class="alerts-column alerts-column-side">
                            <section class="alerts-panel">
                                <div class="alerts-panel-header">
                                    <div class="alerts-panel-title">Alert details <span class="alerts-panel-sub">selected alert preview</span></div>
                                </div>
                                <div class="alerts-panel-body">
                                    <ul class="alerts-info-list">
                                        <li class="alerts-info-item"><strong>Title</strong><span id="detail-title">Storage connector unavailable</span></li>
                                        <li class="alerts-info-item"><strong>Severity</strong><span id="detail-severity">high</span></li>
                                        <li class="alerts-info-item"><strong>Status</strong><span id="detail-status">open</span></li>
                                        <li class="alerts-info-item"><strong>Code</strong><span id="detail-code">301</span></li>
                                        <li class="alerts-info-item"><strong>Trace</strong><span id="detail-trace">storage.connector.health_failed</span></li>
                                        <li class="alerts-info-item"><strong>Created</strong><span id="detail-time">today 14:08</span></li>
                                        <li class="alerts-info-item"><strong>Description</strong><span id="detail-description">Primary local storage connector failed health check and new writes are paused.</span></li>
                                    </ul>
                                    <div class="alerts-mini-note">
                                        TO-DO: later, limited alert access should only show alerts scoped to the user’s permissions, tags, or groups.
                                    </div>
                                </div>
                            </section>

                            <section class="alerts-panel">
                                <div class="alerts-panel-header">
                                    <div class="alerts-panel-title">Metadata <span class="alerts-panel-sub">simple JSON preview</span></div>
                                    <div class="alerts-panel-tools">
                                        <button class="win98-button alerts-tool-button" type="button" data-command="copy-meta">Copy</button>
                                    </div>
                                </div>
                                <div class="alerts-panel-body">
                                    <pre class="alerts-json-box" id="detail-metadata">{
  "connector": "local-main",
  "mode": "read_only",
  "retry_in": "30s"
}</pre>
                                </div>
                            </section>

                            <section class="alerts-panel alerts-actions-panel">
                                <div class="alerts-panel-header">
                                    <div class="alerts-panel-title">Actions <span class="alerts-panel-sub">simple first version</span></div>
                                </div>
                                <div class="alerts-panel-body">
                                    <div class="alerts-action-stack">
                                        <button class="win98-button alerts-action-button" type="button" data-command="ack">Acknowledge selected</button>
                                        <button class="win98-button alerts-action-button" type="button" data-command="close">Close selected</button>
                                        <button class="win98-button alerts-action-button" type="button" data-command="delete">Delete selected</button>
                                        <button class="win98-button alerts-action-button" type="button" data-command="refresh">Refresh alerts</button>
                                    </div>
                                    <div class="alerts-mini-note">
                                        Alerts persist until deleted. Acknowledge and close update state; delete removes permanently.
                                    </div>
                                </div>
                            </section>
                        </div>
                    </section>
                </div>

                <div class="alerts-footerbar">
                    <div class="alerts-footer-left">
                        <span class="alerts-status-pill" id="selected-count">Selected: 0</span>
                        <span class="alerts-status-pill" id="alerts-total-pill">{{ len .Alerts }} alerts</span>
                    </div>
                    <div class="alerts-footer-right">
                        <button class="win98-button alerts-footer-button" type="button" data-command="ack">Acknowledge</button>
                        <button class="win98-button alerts-footer-button" type="button" data-command="close">Close</button>
                        <button class="win98-button alerts-footer-button" type="button" data-command="delete">Delete</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="toast" id="toast" role="status" aria-live="polite"></div>

    <script id="alerts-data" type="application/json">{{ toJSON .Alerts }}</script>
    <script src="/static/js/warpbox-ui.js"></script>
    <script src="/static/js/admin/alerts.js"></script>
</body>
</html>
{{ end }}
