1{{#> layout }}
 2<script>
 3    window.addEventListener("DOMContentLoaded", function () {
 4        let users = document.getElementById("users");
 5        if (users) {
 6            users.addEventListener("change", async function (event) {
 7                const action = event.target.getAttribute("action");
 8                if (action) {
 9                    console.log(action, event.target.checked);
10                    const response = await fetch(action, {
11                        method: 'PUT',
12                        headers: {
13                            'Content-Type': 'application/json'
14                        },
15                        body: JSON.stringify({ admin: event.target.checked })
16                    });
17                }
18            });
19        }
20    });
21</script>
22
23<div class="bg-white">
24    <div class="container py-4 px-8 md:px-12 mx-auto">
25        <h1 class="text-xl font-bold border-b border-gray-300 mb-4">Users</h1>
26        <table class="table" id="users">
27            <tr>
28                <th class="text-left pr-2">GitHub Login</th>
29                <th class="text-left pr-2">Admin</th>
30                <th></th>
31            </tr>
32            <form action="/users" method="post" class="m-0 mb-4">
33                <tr>
34                    <td>
35                        <input name="github_login" type="text" class="border border-gray-300 p-1 mr-2 w-48"
36                            placeholder="@github_handle">
37                    </td>
38                    <td>
39                        <input type="checkbox" id="admin" name="admin" value="true">
40                    </td>
41                    <td class="text-right">
42                        <button class="p-1 w-20 text-white rounded-md bg-gray-600 hover:bg-black">Add</button>
43                    </td>
44                </tr>
45            </form>
46
47            {{#each users}}
48            <tr>
49                <form action="/users/{{id}}/delete" method="post">
50                    <td class="py-1">
51                        {{github_login}}
52                    </td>
53                    <td>
54                        <input action="/users/{{id}}" type="checkbox" {{#if admin}}checked{{/if}}>
55                    </td>
56                    <td class="text-right">
57                        <button class="p-1 w-20 rounded-md bg-gray-600 hover:bg-black text-white">Remove</button>
58                    </td>
59                </form>
60            </tr>
61            {{/each}}
62        </table>
63
64        <h1 class="text-xl font-bold border-b border-gray-300 mb-4 mt-8">Signups</h1>
65        <table class="table">
66            {{#each signups}}
67            <tr>
68                <form action="/signups/{{id}}/delete" method="post">
69                    <td class="align-top">{{github_login}}</td>
70                    <td class="pl-4 align-top">{{email_address}}</td>
71                    <td class="pl-4 align-top">{{about}}</td>
72                    <td class="text-right">
73                        <button class="p-1 w-20 rounded-md bg-gray-600 hover:bg-black text-white">Remove</button>
74                    </td>
75                </form>
76            </tr>
77            {{/each}}
78        </table>
79    </div>
80</div>
81{{/layout}}