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

    <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" role="menu">
                <a class="menu-action" href="/account/boxes"><span>R</span><span>Refresh boxes</span><span></span></a>
                <a class="menu-action" href="/account/boxes/export.csv"><span>E</span><span>Export visible CSV</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/boxes?status=active"><span>A</span><span>Active</span><span></span></a>
                <a class="menu-action" href="/account/boxes?status=expired"><span>X</span><span>Expired</span><span></span></a>
                <a class="menu-action" href="/account/boxes?sort=largest"><span>L</span><span>Largest first</span><span></span></a>
            </div>
        </div>
    </nav>

    <div class="boxes-layout account-body-content">
        {{ if .Error }}<p class="account-error">{{ .Error }}</p>{{ end }}

        <section class="stats-grid" aria-label="Box statistics">
            <article class="stat-card sunken-panel is-info">
                <p class="stat-label">Visible</p>
                <p class="stat-value">{{ .Stats.Visible }}</p>
                <p class="stat-note"><span class="stat-note-pill">{{ .Stats.Total }} matching</span></p>
            </article>
            <article class="stat-card sunken-panel is-warning">
                <p class="stat-label">Expired</p>
                <p class="stat-value">{{ .Stats.Expired }}</p>
                <p class="stat-note"><span class="stat-note-pill">visible page</span></p>
            </article>
            <article class="stat-card sunken-panel is-info">
                <p class="stat-label">Storage</p>
                <p class="stat-value">{{ .Stats.Storage }}</p>
                <p class="stat-note"><span class="stat-note-pill">visible page</span></p>
            </article>
            <article class="stat-card sunken-panel is-ok">
                <p class="stat-label">Policy</p>
                <p class="stat-note"><span class="stat-note-pill">{{ .PolicySummary }}</span></p>
            </article>
        </section>

        <form class="boxes-filterbar raised-panel" action="/account/boxes" method="get">
            <label class="account-form-row">
                <span>Search</span>
                <input class="account-control" name="q" value="{{ .Filters.Query }}" placeholder="id, owner, file">
            </label>
            <label class="account-form-row">
                <span>Owner</span>
                <input class="account-control" name="owner" value="{{ .Filters.Owner }}" placeholder="all">
            </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="active" {{ if eq .Filters.Status "active" }}selected{{ end }}>Active</option>
                    <option value="pending" {{ if eq .Filters.Status "pending" }}selected{{ end }}>Pending</option>
                    <option value="expired" {{ if eq .Filters.Status "expired" }}selected{{ end }}>Expired</option>
                </select>
            </label>
            <label class="account-form-row">
                <span>Flag</span>
                <select class="account-control" name="flag">
                    <option value="all" {{ if eq .Filters.Flag "all" }}selected{{ end }}>All</option>
                    <option value="password" {{ if eq .Filters.Flag "password" }}selected{{ end }}>Password</option>
                    <option value="one-time" {{ if eq .Filters.Flag "one-time" }}selected{{ end }}>One-time</option>
                    <option value="zip-disabled" {{ if eq .Filters.Flag "zip-disabled" }}selected{{ end }}>ZIP disabled</option>
                    <option value="expired" {{ if eq .Filters.Flag "expired" }}selected{{ end }}>Expired</option>
                    <option value="refreshable" {{ if eq .Filters.Flag "refreshable" }}selected{{ end }}>Refreshable</option>
                </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="largest" {{ if eq .Filters.Sort "largest" }}selected{{ end }}>Largest</option>
                    <option value="expires" {{ if eq .Filters.Sort "expires" }}selected{{ end }}>Expires soon</option>
                    <option value="expired" {{ if eq .Filters.Sort "expired" }}selected{{ end }}>Expired first</option>
                </select>
            </label>
            <input type="hidden" name="page_size" value="{{ .PageSize }}">
            <button class="win98-button" type="submit">Apply</button>
        </form>

        <form class="win98-window section-window" action="/account/boxes/bulk/expire" method="post">
            {{ template "account_csrf_field" . }}
            <div class="win98-titlebar">
                <div class="win98-titlebar-label">
                    <span class="win98-titlebar-icon">B</span>
                    <h2>Box Index</h2>
                </div>
            </div>
            <div class="section-body sunken-panel">
                <div class="scroll-panel boxes-table-scroll">
                    <table class="account-table boxes-table">
                        <thead>
                            <tr>
                                <th>Select</th>
                                <th>Box</th>
                                <th>Owner</th>
                                <th>Status</th>
                                <th>Files</th>
                                <th>Size</th>
                                <th>Created</th>
                                <th>Expires</th>
                                <th>Flags</th>
                                <th>Refresh policy</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{ range .Rows }}
                                <tr>
                                    <td><input type="checkbox" name="box_ids" value="{{ .ID }}"></td>
                                    <td>{{ .ID }}</td>
                                    <td>{{ .Owner }}</td>
                                    <td><span class="badge">{{ .Status }}</span></td>
                                    <td>{{ .FileCount }}</td>
                                    <td>{{ .Size }}</td>
                                    <td>{{ .CreatedAt }}</td>
                                    <td>{{ .ExpiresAt }}</td>
                                    <td>{{ .Flags }}</td>
                                    <td>{{ .Policy }}</td>
                                    <td>
                                        <div class="box-actions">
                                            <a class="tiny-button" href="{{ .OpenURL }}">Open</a>
                                            {{ if .CanManage }}<a class="tiny-button" href="{{ .ManageURL }}">Manage</a>{{ end }}
                                        </div>
                                    </td>
                                </tr>
                            {{ else }}
                                <tr><td colspan="11">No indexed boxes found.</td></tr>
                            {{ end }}
                        </tbody>
                    </table>
                </div>
                <div class="bulk-actions raised-panel">
                    <label class="account-form-row">
                        <span>Bump seconds</span>
                        <input class="account-control" name="bump_seconds" value="3600" inputmode="numeric">
                    </label>
                    <button class="win98-button" type="submit" data-confirm="Expire selected boxes?">Expire selected</button>
                    <button class="win98-button" type="submit" formaction="/account/boxes/bulk/bump-expiry">Bump selected</button>
                    <button class="win98-button" type="submit" formaction="/account/boxes/bulk/delete" data-confirm="Delete selected boxes permanently?">Delete selected</button>
                    <button class="win98-button" type="submit" formaction="/account/boxes/delete-largest" data-confirm="Delete 10 biggest matching boxes permanently?">Delete largest 10</button>
                </div>
            </div>
        </form>

        <nav class="pagination-strip raised-panel" aria-label="Pagination">
            <span class="badge">Page {{ .Page }} / {{ .TotalPages }}</span>
            {{ if .HasPrev }}<a class="win98-button" href="{{ .PrevURL }}">Prev</a>{{ end }}
            {{ if .HasNext }}<a class="win98-button" href="{{ .NextURL }}">Next</a>{{ end }}
        </nav>
    </div>

    <footer class="win98-statusbar" aria-label="Boxes status">
        <span>boxes index</span>
        <span>{{ .Total }} matching</span>
        <span>ready</span>
    </footer>
</main>
{{ template "account_shell_end" . }}