{{ define "admin/boxes.html" }}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>WarpBox Admin Boxes</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/boxes.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 Boxes</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="Boxes 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 list</span><span class="shortcut">F5</span></button>
                            <button class="menu-action" type="button" data-command="export"><span>E</span><span>Export visible CSV</span><span></span></button>
                        </div>
                    </div>
                    <div class="menu-item">
                        <button class="menu-button" type="button" aria-expanded="false">View</button>
                        <div class="menu-popup">
                            <button class="menu-action" type="button" data-command="status-ready"><span>V</span><span>Show ready only</span><span></span></button>
                            <button class="menu-action" type="button" data-command="status-expired"><span>X</span><span>Show expired only</span><span></span></button>
                            <button class="menu-action" type="button" data-command="clear-filters"><span>C</span><span>Clear filters</span><span></span></button>
                        </div>
                    </div>
                    <div class="menu-item">
                        <button class="menu-button" type="button" aria-expanded="false">Boxes</button>
                        <div class="menu-popup">
                            <button class="menu-action" type="button" data-command="expire"><span>!</span><span>Expire selected now</span><span></span></button>
                            <button class="menu-action" type="button" data-command="extend-day"><span>+</span><span>Extend selected by 24h</span><span></span></button>
                            <button class="menu-action" type="button" data-command="extend-week"><span>7</span><span>Extend selected by 7d</span><span></span></button>
                            <div class="menu-separator"></div>
                            <button class="menu-action" type="button" data-command="delete"><span>D</span><span>Delete selected</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-scope"><span>?</span><span>Ownership scope note</span><span></span></button>
                            <button class="menu-action" type="button" data-command="help-flags"><span>F</span><span>Flag meanings</span><span></span></button>
                        </div>
                    </div>
                </nav>

                <div class="admin-workspace-body boxes-page-body">
                    <section class="boxes-summary-grid" aria-label="Boxes summary">
                        <article class="boxes-stat-card is-info">
                            <p class="boxes-stat-label">Total boxes</p>
                            <p class="boxes-stat-value" data-stat-total>0</p>
                            <p class="boxes-stat-note">All stored manifests and legacy boxes</p>
                        </article>
                        <article class="boxes-stat-card is-ok">
                            <p class="boxes-stat-label">Ready</p>
                            <p class="boxes-stat-value" data-stat-ready>0</p>
                            <p class="boxes-stat-note">Complete and still available</p>
                        </article>
                        <article class="boxes-stat-card is-warning">
                            <p class="boxes-stat-label">Uploading</p>
                            <p class="boxes-stat-value" data-stat-uploading>0</p>
                            <p class="boxes-stat-note">Still waiting on files</p>
                        </article>
                        <article class="boxes-stat-card is-danger">
                            <p class="boxes-stat-label">Expired / consumed</p>
                            <p class="boxes-stat-value" data-stat-expired>0</p>
                            <p class="boxes-stat-note">Needs cleanup or review</p>
                        </article>
                    </section>

                    <section class="boxes-hero-note">
                        <div>
                            <strong>Scope note.</strong>
                            <span>This page lists real stored boxes and real file state. Per-user ownership scoping is still pending backend account data.</span>
                        </div>
                        <div class="boxes-hero-tags">
                            <span class="boxes-hero-tag">real data</span>
                            <span class="boxes-hero-tag">real actions</span>
                            <span class="boxes-hero-tag">ownership TODO</span>
                        </div>
                    </section>

                    <section class="boxes-content-grid">
                        <div class="boxes-column">
                            <section class="boxes-panel">
                                <div class="boxes-panel-header">
                                    <div class="boxes-panel-title">Box list <span class="boxes-panel-sub">search, filter, bulk actions</span></div>
                                    <div class="boxes-panel-tools">
                                        <button class="win98-button boxes-tool-button" type="button" data-command="refresh">Refresh</button>
                                        <button class="win98-button boxes-tool-button" type="button" data-command="export">Export CSV</button>
                                        <button class="win98-button boxes-tool-button" type="button" data-command="expire">Expire</button>
                                        <button class="win98-button boxes-tool-button" type="button" data-command="extend-day">+24h</button>
                                        <button class="win98-button boxes-tool-button is-danger" type="button" data-command="delete">Delete</button>
                                    </div>
                                </div>
                                <div class="boxes-panel-body">
                                    <div class="boxes-toolbar-grid">
                                        <input class="boxes-input" id="boxes-search" type="search" placeholder="Search box id, file name, mime, retention">
                                        <select class="boxes-select" id="boxes-status-filter">
                                            <option value="all" selected>All statuses</option>
                                            <option value="ready">Ready</option>
                                            <option value="uploading">Uploading</option>
                                            <option value="attention">Needs review</option>
                                            <option value="expired">Expired</option>
                                            <option value="consumed">Consumed</option>
                                            <option value="legacy">Legacy</option>
                                        </select>
                                        <select class="boxes-select" id="boxes-flag-filter">
                                            <option value="all" selected>All flags</option>
                                            <option value="protected">Protected</option>
                                            <option value="one-time">One-time</option>
                                            <option value="zip off">ZIP off</option>
                                            <option value="legacy">Legacy</option>
                                        </select>
                                        <select class="boxes-select" id="boxes-sort">
                                            <option value="newest" selected>Newest first</option>
                                            <option value="expires">Soonest expiry</option>
                                            <option value="largest">Largest size</option>
                                            <option value="name">Box id</option>
                                        </select>
                                        <select class="boxes-select" id="boxes-page-size">
                                            <option value="10" selected>10 / page</option>
                                            <option value="25">25 / page</option>
                                            <option value="50">50 / page</option>
                                            <option value="9999">All rows</option>
                                        </select>
                                    </div>

                                    <div class="boxes-table-wrap">
                                        <table class="boxes-table">
                                            <thead>
                                                <tr>
                                                    <th class="boxes-col-check"><input type="checkbox" id="boxes-select-all"></th>
                                                    <th class="boxes-col-id">Box ID</th>
                                                    <th class="boxes-col-status">Status</th>
                                                    <th class="boxes-col-files">Files</th>
                                                    <th class="boxes-col-size">Size</th>
                                                    <th class="boxes-col-retention">Retention</th>
                                                    <th class="boxes-col-expires">Expires</th>
                                                    <th>Flags</th>
                                                    <th class="boxes-col-actions">Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody id="boxes-table-body"></tbody>
                                        </table>
                                        <div class="boxes-empty-state" id="boxes-empty-state" hidden>No boxes match current filters.</div>
                                    </div>

                                    <div class="boxes-footer-bar">
                                        <span id="boxes-range-label">Showing 0-0 of 0</span>
                                        <span id="boxes-selected-label">Selected: 0</span>
                                        <div class="boxes-pagination">
                                            <button class="win98-button boxes-page-button" type="button" id="boxes-prev-page">Prev</button>
                                            <span id="boxes-page-label">Page 1 / 1</span>
                                            <button class="win98-button boxes-page-button" type="button" id="boxes-next-page">Next</button>
                                        </div>
                                    </div>
                                </div>
                            </section>
                        </div>

                        <div class="boxes-column boxes-column-side">
                            <section class="boxes-panel">
                                <div class="boxes-panel-header">
                                    <div class="boxes-panel-title">Box details <span class="boxes-panel-sub">selected box preview</span></div>
                                </div>
                                <div class="boxes-panel-body boxes-detail-body">
                                    <ul class="boxes-info-list">
                                        <li class="boxes-info-item"><strong>Box</strong><span id="detail-box-id">-</span></li>
                                        <li class="boxes-info-item"><strong>Status</strong><span id="detail-status">-</span></li>
                                        <li class="boxes-info-item"><strong>Created</strong><span id="detail-created">-</span></li>
                                        <li class="boxes-info-item"><strong>Expires</strong><span id="detail-expires">-</span></li>
                                        <li class="boxes-info-item"><strong>Retention</strong><span id="detail-retention">-</span></li>
                                        <li class="boxes-info-item"><strong>Files</strong><span id="detail-files">-</span></li>
                                        <li class="boxes-info-item"><strong>Size</strong><span id="detail-size">-</span></li>
                                        <li class="boxes-info-item"><strong>Flags</strong><span id="detail-flags">-</span></li>
                                    </ul>

                                    <div class="boxes-action-stack">
                                        <div class="boxes-action-grid">
                                            <a class="win98-button boxes-action-button" id="detail-open" href="#" target="_blank" rel="noreferrer">Open</a>
                                            <a class="win98-button boxes-action-button" id="detail-zip" href="#" target="_blank" rel="noreferrer">ZIP</a>
                                        </div>
                                        <div class="boxes-action-grid">
                                            <button class="win98-button boxes-action-button" type="button" data-command="active-expire">Expire now</button>
                                            <button class="win98-button boxes-action-button" type="button" data-command="active-extend-day">+24h</button>
                                        </div>
                                        <div class="boxes-action-grid">
                                            <button class="win98-button boxes-action-button" type="button" data-command="active-extend-week">+7d</button>
                                            <button class="win98-button boxes-action-button is-danger" type="button" data-command="active-delete">Delete</button>
                                        </div>
                                    </div>
                                </div>
                            </section>

                            <section class="boxes-panel boxes-files-panel">
                                <div class="boxes-panel-header">
                                    <div class="boxes-panel-title">Files <span class="boxes-panel-sub">real file inventory</span></div>
                                </div>
                                <div class="boxes-panel-body">
                                    <div class="boxes-file-list" id="detail-file-list"></div>
                                </div>
                            </section>
                        </div>
                    </section>
                </div>

                <footer class="status-bar admin-dashboard-statusbar">
                    <span id="boxes-footer-summary">0 boxes loaded</span>
                    <span id="boxes-footer-scope">scope: global admin view</span>
                    <span id="boxes-footer-zip">{{ if .ZipDownloadsOn }}zip downloads enabled{{ else }}zip downloads disabled{{ end }}</span>
                </footer>
            </div>
        </div>
    </div>

    <div id="toast" class="wb-toast" role="status" aria-live="polite"></div>
    <script id="boxes-data" type="application/json">{{ toJSON .Boxes }}</script>
    <script src="/static/js/warpbox-ui.js"></script>
    <script src="/static/js/admin/boxes.js"></script>
</body>
</html>
{{ end }}
