<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Equipo | Trokkmart</title>
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Outfit:wght@600;700;800&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="/css/estilos.css" />
</head>
<body>
  <%- include('partials/nav', { activo: 'equipo' }) %>

  <main class="page">
    <div class="page-head">
      <div>
        <h1>Equipo</h1>
        <p class="page-sub">Los supervisores pueden ver y editar todo, pero nunca eliminar nada (productos, categorías, métodos de pago, reseñas).</p>
      </div>
    </div>

    <div class="split-2 split-2--wide-right">
      <div class="card">
        <h3 style="font-family: var(--font-display); margin-top:0;">Nuevo supervisor</h3>
        <% if (error) { %><p class="alert alert-error"><%= error %></p><% } %>
        <form action="/panel/equipo" method="POST">
          <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
          <div class="form-group">
            <label>Nombre</label>
            <input type="text" name="nombre" required />
          </div>
          <div class="form-group">
            <label>Correo</label>
            <input type="email" name="correo" required />
          </div>
          <div class="form-group">
            <label>Contraseña</label>
            <input type="password" name="clave" required minlength="6" />
          </div>
          <button type="submit" class="btn btn-primary btn-full">Crear acceso de supervisor</button>
        </form>
      </div>

      <div class="card">
        <h3 style="font-family: var(--font-display); margin-top:0;">Accesos actuales</h3>
        <div class="table-wrap">
          <table>
            <thead><tr><th>Nombre</th><th>Correo</th><th>Rol</th><th>Estado</th><th>Acciones</th></tr></thead>
            <tbody>
              <% equipo.forEach(function (u) { %>
                <tr>
                  <td data-label="Nombre"><strong><%= u.nombre %></strong></td>
                  <td data-label="Correo"><%= u.correo %></td>
                  <td data-label="Rol"><%= u.rol === 'dueno' ? 'Dueño' : 'Supervisor' %></td>
                  <td data-label="Estado"><span class="badge <%= u.activo ? 'badge-ok' : 'badge-off' %>"><%= u.activo ? 'ACTIVO' : 'DESACTIVADO' %></span></td>
                  <td data-label="Acciones">
                    <% if (u.rol !== 'dueno') { %>
                      <form action="/panel/equipo/<%= u.id %>/alternar" method="POST">
                        <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
                        <button type="submit" class="btn btn-outline btn-sm"><%= u.activo ? 'Desactivar' : 'Activar' %></button>
                      </form>
                    <% } %>
                  </td>
                </tr>
              <% }) %>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </main>
</body>
</html>
