<div class="section-title">
  <h1>Usuarios registrados</h1>
  <a class="btn btn-ghost btn-sm" href="/admin">← Volver</a>
</div>

<section class="card">
  <p class="muted"><strong><%= usuarios.length %></strong> usuario(s) registrado(s).</p>
  <% if (usuarios.length === 0) { %>
    <p class="muted">Aún no hay usuarios.</p>
  <% } else { %>
    <table>
      <thead>
        <tr>
          <th>Usuario</th>
          <th>Registrado</th>
          <th class="center">Quinielas</th>
          <th>Restablecer contraseña</th>
        </tr>
      </thead>
      <tbody>
        <% usuarios.forEach(function (u) { %>
          <tr>
            <td>
              <%= u.nombre %>
              <% if (u.rol === 'admin') { %><span class="badge badge-en_curso">admin</span><% } %>
              <div class="muted" style="font-size:.8rem"><%= u.email %></div>
            </td>
            <td class="muted"><%= fmt.fechaCorta(u.creado_en) %></td>
            <td class="center">
              <strong><%= u.total_q %></strong> quiniela<%= u.total_q === 1 ? '' : 's' %>
              <% if (u.activas || u.pendientes) { %>
                <div class="muted" style="font-size:.8rem">
                  <%= u.activas %> activa(s)<% if (u.pendientes) { %> · <%= u.pendientes %> pendiente(s)<% } %>
                </div>
              <% } %>
            </td>
            <td>
              <form action="/admin/usuarios/<%= u.id %>/password" method="post"
                    onsubmit="return confirm('¿Restablecer la contraseña de <%= u.nombre %>?');"
                    style="display:flex;gap:6px;align-items:center">
                <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
                <input type="text" name="password" placeholder="Nueva clave" minlength="6" required
                       style="max-width:150px" autocomplete="off" />
                <button class="btn btn-sm" type="submit">Restablecer</button>
              </form>
            </td>
          </tr>
        <% }); %>
      </tbody>
    </table>
  <% } %>
</section>
