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

    <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" role="menu">
                <a class="menu-action" href="/account/alerts"><span>R</span><span>Refresh alerts</span><span></span></a>
                <a class="menu-action" href="/account/alerts/export.json"><span>E</span><span>Export JSON</span><span></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="/account/alerts?status=open"><span>O</span><span>Open</span><span></span></a>
                <a class="menu-action" href="/account/alerts?severity=high"><span>H</span><span>High severity</span><span></span></a>
                <a class="menu-action" href="/account/alerts?sort=severity"><span>S</span><span>Sort by severity</span><span></span></a>
            </div>
        </div>
    </nav>

    <div class="alerts-layout account-body-content">
        <section class="stats-grid" aria-label="Alert statistics">
            <article class="stat-card sunken-panel is-warning">
                <p class="stat-label">Open</p>
                <p class="stat-value">{{ .Stats.Open }}</p>
                <p class="stat-note"><span class="stat-note-pill">needs attention</span></p>
            </article>
            <article class="stat-card sunken-panel is-info">
                <p class="stat-label">Acknowledged</p>
                <p class="stat-value">{{ .Stats.Acknowledged }}</p>
                <p class="stat-note"><span class="stat-note-pill">seen</span></p>
            </article>
            <article class="stat-card sunken-panel is-ok">
                <p class="stat-label">Closed</p>
                <p class="stat-value">{{ .Stats.Closed }}</p>
                <p class="stat-note"><span class="stat-note-pill">done</span></p>
            </article>
            <article class="stat-card sunken-panel is-danger">
                <p class="stat-label">High</p>
                <p class="stat-value">{{ .Stats.High }}</p>
                <p class="stat-note"><span class="stat-note-pill">{{ .Stats.Medium }} medium</span><span class="stat-note-pill">{{ .Stats.Low }} low</span></p>
            </article>
        </section>

        <form class="alerts-filterbar raised-panel" action="/account/alerts" method="get">
            <label class="account-form-row">
                <span>Search</span>
                <input class="account-control" name="q" value="{{ .Filters.Query }}" placeholder="title, code, trace">
            </label>
            <label class="account-form-row">
                <span>Severity</span>
                <select class="account-control" name="severity">
                    <option value="all" {{ if eq .Filters.Severity "all" }}selected{{ end }}>All</option>
                    <option value="low" {{ if eq .Filters.Severity "low" }}selected{{ end }}>Low</option>
                    <option value="medium" {{ if eq .Filters.Severity "medium" }}selected{{ end }}>Medium</option>
                    <option value="high" {{ if eq .Filters.Severity "high" }}selected{{ end }}>High</option>
                </select>
            </label>
            <label class="account-form-row">
                <span>Status</span>
                <select class="account-control" name="status">
                    <option value="all" {{ if eq .Filters.Status "all" }}selected{{ end }}>All</option>
                    <option value="open" {{ if eq .Filters.Status "open" }}selected{{ end }}>Open</option>
                    <option value="acknowledged" {{ if eq .Filters.Status "acknowledged" }}selected{{ end }}>Acknowledged</option>
                    <option value="closed" {{ if eq .Filters.Status "closed" }}selected{{ end }}>Closed</option>
                </select>
            </label>
            <label class="account-form-row">
                <span>Group</span>
                <select class="account-control" name="group">
                    <option value="all" {{ if eq .Filters.Group "all" }}selected{{ end }}>All</option>
                    {{ range .Groups }}
                        <option value="{{ . }}" {{ if eq $.Filters.Group . }}selected{{ end }}>{{ . }}</option>
                    {{ end }}
                </select>
            </label>
            <label class="account-form-row">
                <span>Sort</span>
                <select class="account-control" name="sort">
                    <option value="newest" {{ if eq .Filters.Sort "newest" }}selected{{ end }}>Newest</option>
                    <option value="oldest" {{ if eq .Filters.Sort "oldest" }}selected{{ end }}>Oldest</option>
                    <option value="severity" {{ if eq .Filters.Sort "severity" }}selected{{ end }}>Severity</option>
                </select>
            </label>
            <button class="win98-button" type="submit">Apply</button>
        </form>

        <section class="alerts-workspace">
            <form class="win98-window section-window" action="/account/alerts/bulk/acknowledge" method="post">
                <div class="win98-titlebar">
                    <div class="win98-titlebar-label">
                        <span class="win98-titlebar-icon">!</span>
                        <h2>Alert List</h2>
                    </div>
                </div>
                <div class="section-body sunken-panel">
                    {{ template "account_csrf_field" . }}
                    <div class="scroll-panel alerts-table-scroll">
                        <table class="account-table alerts-table">
                            <thead>
                                <tr>
                                    <th>Select</th>
                                    <th>Severity</th>
                                    <th>Status</th>
                                    <th>Code</th>
                                    <th>Title</th>
                                    <th>Trace</th>
                                    <th>Created</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {{ range .Alerts }}
                                    <tr data-alert-row data-alert-id="{{ .ID }}" data-alert-title="{{ .Title }}" data-alert-description="{{ .Description }}" data-alert-metadata="{{ .MetadataPretty }}" class="{{ if eq $.SelectedAlert.ID .ID }}is-selected{{ end }}">
                                        <td><input type="checkbox" name="alert_ids" value="{{ .ID }}"></td>
                                        <td><span class="badge is-{{ .Severity }}">{{ .Severity }}</span></td>
                                        <td><span class="badge">{{ .Status }}</span></td>
                                        <td>{{ .Code }}</td>
                                        <td>{{ .Title }}</td>
                                        <td>{{ .Trace }}</td>
                                        <td>{{ .CreatedAt }}</td>
                                        <td>
                                            <div class="box-actions">
                                                {{ if $.CanManageAlerts }}
                                                    <button class="tiny-button" type="submit" formaction="/account/alerts/{{ .ID }}/acknowledge">Ack</button>
                                                    <button class="tiny-button" type="submit" formaction="/account/alerts/{{ .ID }}/close">Close</button>
                                                {{ end }}
                                            </div>
                                        </td>
                                    </tr>
                                {{ else }}
                                    <tr><td colspan="8">No alerts found.</td></tr>
                                {{ end }}
                            </tbody>
                        </table>
                    </div>
                    {{ if .CanManageAlerts }}
                        <div class="bulk-actions raised-panel">
                            <button class="win98-button" type="submit">Acknowledge selected</button>
                            <button class="win98-button" type="submit" formaction="/account/alerts/bulk/close">Close selected</button>
                        </div>
                    {{ end }}
                </div>
            </form>

            <aside class="alerts-detail sunken-panel" aria-label="Alert details">
                {{ if .SelectedAlert }}
                    <div>
                        <h2 data-alert-detail-title>{{ .SelectedAlert.Title }}</h2>
                        <p data-alert-detail-description>{{ .SelectedAlert.Description }}</p>
                    </div>
                    <pre class="metadata-pre" data-alert-detail-metadata>{{ .SelectedAlert.MetadataPretty }}</pre>
                    <div class="setting-source">
                        <span class="badge is-{{ .SelectedAlert.Severity }}">{{ .SelectedAlert.Severity }}</span>
                        <span class="badge">{{ .SelectedAlert.Status }}</span>
                        <span class="setting-env">{{ .SelectedAlert.Trace }}</span>
                    </div>
                {{ else }}
                    <div>
                        <h2 data-alert-detail-title>No alert selected</h2>
                        <p data-alert-detail-description>Select an alert row to inspect metadata.</p>
                    </div>
                    <pre class="metadata-pre" data-alert-detail-metadata>{}</pre>
                {{ end }}
            </aside>
        </section>
    </div>

    <footer class="win98-statusbar" aria-label="Alerts status">
        <span>alerts</span>
        <span>{{ .Stats.Open }} open</span>
        <span>ready</span>
    </footer>
</main>
{{ template "account_shell_end" . }}