{% extends "base.html" %}
{% block title %}Users - VulnAPI{% endblock %}
{% block content %}
<h1>Users</h1>
<form method="get" action="/api/users" class="card" style="display:flex;gap:1rem;align-items:flex-end;">
  <div class="form-group" style="flex:1;margin:0">
    <label for="search">Search</label>
    <input type="text" id="search" name="search" placeholder="Search by name or email">
  </div>
  <button type="submit" class="btn btn-primary">Search</button>
</form>
<div class="card">
  <table id="users-table">
    <thead>
      <tr><th>ID</th><th>Name</th><th>Email</th><th>Role</th></tr>
    </thead>
    <tbody></tbody>
  </table>
</div>
<script>
fetch('/api/users').then(r=>r.json()).then(users=>{
  const tbody = document.querySelector('#users-table tbody');
  users.forEach(u=>{
    tbody.innerHTML += `<tr><td>${u.id}</td><td>${u.name}</td><td>${u.email}</td><td>${u.role}</td></tr>`;
  });
});
</script>
{% endblock %}