pub fn Page(ctx: zx.PageContext) zx.Component {
    const allocator = ctx.arena;
    const bench_state = handler.handleRequest(ctx);

    return (
        <main @allocator={allocator}>
            <div id="main">
                <div class="controls">
                    <div class="jumbotron">
                        <h3>Ziex Server-Side "non-keyed"</h3>
                        <div class="button-grid">
                            <form method="get"><button type="submit" class="btn" name="action" value="run">Create 1,000 rows</button></form>
                            <form method="get"><button type="submit" class="btn" name="action" value="runlots">Create 10,000 rows</button></form>
                            <form method="get"><button type="submit" class="btn" name="action" value="add">Append 1,000 rows</button></form>
                            <form method="get"><button type="submit" class="btn" name="action" value="update">Update every 10th row</button></form>
                            <form method="get"><button type="submit" class="btn" name="action" value="clear">Clear</button></form>
                            <form method="get"><button type="submit" class="btn" name="action" value="swaprows">Swap Rows</button></form>
                        </div>
                    </div>
                </div>
                <div class="content">
                    <table class="table table-hover table-striped test-data">
                        <tbody id="tbody">
                            {for (bench_state.rows.items) |row| (
                                <tr data-id={std.fmt.allocPrint(allocator, "{d}", .{row.id}) catch @panic("OOM")} class={if (bench_state.selected_id != null and bench_state.selected_id.? == row.id) "danger" else ""}>
                                    <td class="col-md-1">{std.fmt.allocPrint(allocator, "{d}", .{row.id}) catch @panic("OOM")}</td>
                                    <td class="col-md-4">
                                        <a class="select-link" href="#">
                                            {row.label}
                                        </a>
                                    </td>
                                    <td class="col-md-1">
                                        <a class="remove-link" href="#">
                                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                                        </a>
                                    </td>
                                    <td class="col-md-6"></td>
                                </tr>
                            )}
                        </tbody>
                    </table>
                    <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
                </div>
            </div>
        </main>
    );
}

const zx = @import("zx");
const std = @import("std");
const handler = @import("handler.zig");
