1{{ define "body" }}
 2<link rel="stylesheet" href="/static/table.css">
 3<h1>Exercises</h1>
 4
 5<!-- Table controls -->
 6<div class="table-controls">
 7    <input type="text" id="search-input" placeholder="Search exercises...">
 8    <div class="column-toggles">
 9        <span>Toggle columns:</span>
10        <!-- Column toggles will be added here -->
11    </div>
12</div>
13
14<!-- Exercises table -->
15<table id="data-table" class="data-table">
16    <thead>
17        <tr>
18            <!-- Table headers will be added here -->
19        </tr>
20    </thead>
21    <tbody>
22        <!-- Exercise rows will be populated here -->
23    </tbody>
24</table>
25
26<script src="/static/table.js"></script>
27<script>
28document.addEventListener("DOMContentLoaded", function () {
29  // Fetch and display exercises
30  fetch("/api/exercises")
31    .then((response) => response.json())
32    .then((exercises) => {
33        columns = [
34            { id: "id", label: "ID", visible: false },
35            { id: "name", label: "Name", visible: true },
36            { id: "equipment", label: "Equipment", visible: true },
37            { id: "primaryMuscles", label: "Primary muscles", visible: true },
38            { id: "secondaryMuscles", label: "Secondary muscles", visible: true },
39            { id: "category", label: "Category", visible: false },
40            { id: "force", label: "Force", visible: false },
41            { id: "instructions", label: "Instructions", visible: false },
42            { id: "level", label: "Level", visible: false },
43            { id: "mechanic", label: "Mechanic", visible: false },
44        ];
45        data = exercises;
46        console.log(data);
47        setupColumnToggles(columns);
48        renderTable();
49    })
50    .catch((error) => console.error("Error fetching exercises:", error));
51
52  // Search functionality
53  document
54    .getElementById("search-input")
55    .addEventListener("input", function () {
56      renderTable();
57    });
58});
59</script>
60{{ end }}