<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Mis productos | 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: 'productos' }) %>

  <main class="page">
    <div class="page-head">
      <div>
        <h1>Mis productos</h1>
        <p class="page-sub">Lo que ves acá es lo único que se muestra en tu catálogo público.</p>
      </div>
      <a href="/panel/nuevo" class="btn btn-primary">+ Nuevo producto</a>
    </div>

    <% if (productos.length === 0) { %>
      <div class="card empty-state">Todavía no cargaste ningún producto.</div>
    <% } else { %>
      <div class="table-wrap">
        <table>
          <thead><tr><th>Producto</th><th>Categoría</th><th>Precio</th><th>Stock</th><th>Estado</th><th>Acciones</th></tr></thead>
          <tbody>
            <% productos.forEach(function (p) { %>
              <tr>
                <td data-label="Producto"><strong><%= p.nombre %></strong></td>
                <td data-label="Categoría"><%= p.categoria ? p.categoria.nombre : '—' %></td>
                <td data-label="Precio">
                  <% if (p.precioOferta) { %>
                    <span style="text-decoration: line-through; color: var(--ink-faint);">$<%= p.precio %></span>
                    <strong style="color: var(--brand);">$<%= p.precioOferta %></strong>
                  <% } else { %>
                    $<%= p.precio %>
                  <% } %>
                </td>
                <td data-label="Stock"><%= p.stock %></td>
                <td data-label="Estado"><span class="badge <%= p.activo ? 'badge-ok' : 'badge-off' %>"><%= p.activo ? 'PUBLICADO' : 'OCULTO' %></span></td>
                <td data-label="Acciones">
                  <a href="/panel/<%= p.id %>/editar" class="btn btn-outline btn-sm">Editar</a>
                  <% if (usuarioActual && usuarioActual.rol === 'dueno') { %>
                    <form action="/panel/<%= p.id %>/eliminar" method="POST" style="display:inline;" onsubmit="return confirm('¿Eliminar este producto?');">
                      <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
                      <button type="submit" class="btn btn-danger btn-sm">Eliminar</button>
                    </form>
                  <% } %>
                </td>
              </tr>
            <% }) %>
          </tbody>
        </table>
      </div>
    <% } %>
  </main>
</body>
</html>
