{{define "admin_title"}}Benutzer verwalten — Admin{{end}}

{{define "admin_content"}}
<h1>Benutzer</h1>

{{if .Error}}<p class="error">{{.Error}}</p>{{end}}

<form method="post" action="/admin/users" style="display:flex;gap:1rem;align-items:flex-end;flex-wrap:wrap">
  <div>
    <label>Benutzername</label>
    <input type="text" name="username" required autocomplete="off">
  </div>
  <div>
    <label>Passwort</label>
    <input type="password" name="password" required autocomplete="new-password">
  </div>
  <button type="submit">Anlegen</button>
</form>

<figure>
<table>
  <thead><tr><th>Benutzername</th><th>Admin</th><th>Erstellt</th><th></th></tr></thead>
  <tbody>
  {{range .Users}}
  <tr>
    <td>{{.Username}}</td>
    <td>{{if .IsAdmin}}✓{{end}}</td>
    <td><small>{{.CreatedAt.Format "2006-01-02"}}</small></td>
    <td>
      {{if ne .UserID $.User.UserID}}
      <button class="btn-delete" data-url="/admin/users/{{.UserID}}" data-name="{{.Username}}">Löschen</button>
      {{else}}
      <small>(du)</small>
      {{end}}
    </td>
  </tr>
  {{end}}
  </tbody>
</table>
</figure>
{{end}}

{{define "admin_scripts"}}
<script>
document.querySelectorAll('.btn-delete').forEach(function(btn) {
  btn.addEventListener('click', function() {
    if (!confirm('Benutzer "' + btn.dataset.name + '" löschen?')) return;
    fetch(btn.dataset.url, {method: 'DELETE'})
      .then(function() { window.location.reload(); });
  });
});
</script>
{{end}}