{% extends "base.html" %}
{% block content %}
<h1>Users</h1>
<form method="post" class="card">
  <input type="hidden" name="action" value="add">
  <div class="grid">
    <div><label>Username</label><input name="username" required></div>
    <div><label>Password</label><input name="password" required></div>
    <div><label>Role</label>
      <select name="role">
        <option value="user">user</option>
        <option value="viewer">viewer</option>
        <option value="admin">admin</option>
      </select>
    </div>
  </div>
  <button type="submit">Tambah User</button>
</form>

<table class="table">
  <thead><tr><th>Username</th><th>Role</th><th>Aksi</th></tr></thead>
  <tbody>
  {% for u in users %}
    <tr>
      <td>{{ u.username }}</td><td>{{ u.role }}</td>
      <td>
        <form method="post" style="display:inline">
          <input type="hidden" name="action" value="delete">
          <input type="hidden" name="username" value="{{ u.username }}">
          <button class="danger" onclick="return confirm('Hapus user?')">Hapus</button>
        </form>
      </td>
    </tr>
  {% endfor %}
  </tbody>
</table>
{% endblock %}