<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Tu carrito</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>
  <nav class="navbar">
    <a href="/" class="logo">← Seguir comprando</a>
  </nav>

  <main class="page">
    <h1 style="font-family: var(--font-display); color: var(--ink);">Tu carrito</h1>

    <% if (items.length === 0) { %>
      <div class="card empty-state">Tu carrito está vacío. <a href="/">Ver productos</a></div>
    <% } else { %>
      <div class="table-wrap">
        <table>
          <thead><tr><th>Producto</th><th>Precio</th><th>Cantidad</th><th>Subtotal</th><th></th></tr></thead>
          <tbody>
            <% items.forEach(function (item) { %>
              <tr>
                <td data-label="Producto"><%= item.producto.nombre %></td>
                <td data-label="Precio">
                  <% if (item.precioUnitarioLocal && item.precioUnitarioLocal.moneda !== 'USD') { %>
                    <%= item.precioUnitarioLocal.formateado %>
                    <span style="display:block; font-size:0.7rem; color:var(--ink-faint);">≈ $<%= item.precioUnitario %></span>
                  <% } else { %>
                    $<%= item.precioUnitario %>
                  <% } %>
                </td>
                <td data-label="Cantidad">
                  <form action="/carrito/<%= item.producto.id %>/actualizar" method="POST" style="display:flex; gap:0.4rem;">
                    <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
                    <input type="number" name="cantidad" value="<%= item.cantidad %>" min="1" style="width:70px; padding:0.4rem; border:1px solid var(--line); border-radius:4px;" />
                    <button type="submit" class="btn btn-outline btn-sm">Actualizar</button>
                  </form>
                </td>
                <td data-label="Subtotal">
                  <% if (item.subtotalLocal && item.subtotalLocal.moneda !== 'USD') { %>
                    <%= item.subtotalLocal.formateado %>
                  <% } else { %>
                    $<%= item.subtotal %>
                  <% } %>
                </td>
                <td data-label="">
                  <form action="/carrito/<%= item.producto.id %>/eliminar" method="POST">
                    <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
                    <button type="submit" class="btn btn-danger btn-sm">Quitar</button>
                  </form>
                </td>
              </tr>
            <% }) %>
          </tbody>
        </table>
      </div>
      <p style="text-align:right; margin-top:1.2rem; font-family: var(--font-display); font-size: 1.3rem; color: var(--ink);">
        <% if (totalLocal && totalLocal.moneda !== 'USD') { %>
          Total: <%= totalLocal.formateado %>
          <span style="display:block; font-size:0.85rem; color:var(--ink-faint); font-family: var(--font-body);">≈ $<%= total %> USD</span>
        <% } else { %>
          Total: $<%= total %>
        <% } %>
      </p>
      <div style="text-align:right;">
        <a href="/checkout" class="btn btn-primary">Finalizar compra →</a>
      </div>
    <% } %>
  </main>

  <%- include('partials/footer-publico', { negocio }) %>
</body>
</html>
