1document.addEventListener('DOMContentLoaded', function () {
 2    loadAccounts();
 3
 4    document.getElementById('new-account').addEventListener('click', editAccount);
 5});
 6
 7function editAccount() {
 8    let out = "/accounts/edit/";
 9    const id = this.getAttribute("data-id");
10    if (id) {
11        out += "?id=" + id;
12    }
13    location.href = out;
14}
15
16function loadAccounts() {
17    getAccounts().then(accounts => {
18            const header = document.getElementById('accounts-header');
19            const table = document.getElementById('accounts-table');
20            header.innerHTML = '';
21            table.innerHTML = '';
22
23            const tr = document.createElement('tr');
24            const headers = ["ID", "Created", "Updated", "Name"];
25
26            for (const header of headers) {
27                const td = document.createElement('td');
28                td.innerText = header;
29                tr.appendChild(td);
30            }
31            header.appendChild(tr);
32
33            for (const account of accounts) {
34                const tr = document.createElement('tr');
35                tr.setAttribute("data-id", account.id);
36                tr.onclick = editAccount;
37
38                const fields = [
39                    account.id,
40                    formatDate(account.created_at),
41                    formatDate(account.updated_at),
42                    account.name,
43                ];
44
45                for (const field of fields) {
46                    const td = document.createElement('td');
47                    td.innerHTML = field;
48                    tr.appendChild(td);
49                }
50                table.appendChild(tr);
51            }
52        });
53}