<h1>Usuarios y roles</h1>
<div class="admin-panel">
<table class="admin-tabla">
  <thead><tr><th>ID</th><th>Email</th><th>Nombre</th><th>Rol</th><th></th></tr></thead>
  <tbody>
  <% lista.forEach(function(u){ %>
  <tr>
    <td><%= u.id %></td><td><%= u.email %></td><td><%= u.nombre || '' %></td>
    <td>
      <form method="post" action="/admin/usuarios/<%= u.id %>/rol" class="admin-acciones">
        <input type="hidden" name="_csrf" value="<%= csrf %>">
        <select name="rol">
          <% ['paciente','profesional','editor','revisor_medico','admin'].forEach(function(r){ %>
          <option value="<%= r %>" <%= u.rol === r ? 'selected' : '' %>><%= r %></option><% }) %>
        </select>
        <button class="btn btn--mini btn--fantasma" type="submit">Cambiar</button>
      </form>
    </td>
    <td></td>
  </tr>
  <% }) %>
  </tbody>
</table>
</div>
<div class="admin-panel">
  <h2>Crear usuario</h2>
  <form method="post" action="/admin/usuarios" class="admin-form">
    <input type="hidden" name="_csrf" value="<%= csrf %>">
    <div class="campo"><label>Email</label><input name="email" type="email" required></div>
    <div class="campo"><label>Contraseña</label><input name="password" type="password" required minlength="10"></div>
    <div class="campo"><label>Nombre</label><input name="nombre"></div>
    <div class="campo"><label>Rol</label>
      <select name="rol"><option>editor</option><option>revisor_medico</option><option>admin</option><option>profesional</option><option>paciente</option></select></div>
    <div class="admin-acciones campo--ancho"><button class="btn btn--secundario" type="submit">Crear</button></div>
  </form>
</div>
