<%- include("templates/encabezado") %>
  <%- include("templates/googleanalitics") %>

    <script src="/web/js/vero.js" defer></script>

    <link rel="stylesheet" href="/web/css/stylesOfMenu.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

    <!--Menu-->
    <menu>
      <div class="menu-container">
        <div class="cart-container">
          <a href="/verCarrito">
            <div class="cart-icon">
              <i class="bi bi-cart"></i>
              <span class="cart-counter">
                <%= carrito.length %>
              </span>
            </div>
          </a>
        </div>
        <script>
          // Obtiene el contador y el valor actual
          const cartCounter = document.querySelector(".cart-counter");
          const currentCount = parseInt(cartCounter.innerHTML);

        </script>


        <img id="logo" src="/web/Img/Grupo 1@2x.png" alt="Logo" height="70px">

        <span class="hamburger-icon"><i class="fas fa-bars"></i></span>

        <div class="dropdown-menu">
          <ul>
            <li><a href="/inicio">Inicio</a></li>
            <li><a href="/provAlmaguer">Proveedor Almaguer</a></li>
            <li><a href="/provVero">Proveedor Vero</a></li>
            <% if (usuario && usuario.expediente_cliente) { %>
              <li><a href="/editusr/<%= usuario.expediente_cliente %>">Editar datos</a></li>
              <% } %>
                <li><a href="/aboutus">F&Q</a></li>
                <li><a href="/login">Cerrar Sesi√≥n</a></li>
          </ul>
        </div>
      </div>
    </menu>
    
<!-- Lista de productos -->
<div class="grid-container">
  <% let i = 2; %>
  <% items.forEach((producto) => { %>
  <span id="id<%= i %>" class="hidden">
    <%= producto.id_product %>
  </span>
  <div class="grid-item animate__animated animate__rubberBand">
    <img src="/web/images/<%= producto.imagen %>" alt="Imagen del producto" style="width: 100%; height: 100%; object-fit: cover; clip-path: inherit;" />
    <div class="overlay">
      <span id="titulo<%= i %>">
        <%= producto.name_product %> $<%= producto.precio_product %>
      </span>
      <span class="text" id="description<%= i %>" name="descrip_product">
        <%= producto.descrip_product %>
      </span>
      <span class="text" id="ingredients<%= i %>">
        <%= producto.ingredientes_product %>
      </span>
    </div>
  </div>
  <% i++; %>
  <% }) %>
</div>


  <!-- Botones "Agregar al carrito" -->
  <div class="grid-container">
    <% items.forEach((producto) => { %>
    <div class="grid-item animate__animated animate__rubberBand">
      <a href="/agregar/<%= producto.id_product %>" class="btn btn-primary col-5 rounded-4">
        <i class="bi bi-basket3-fill"></i>
      </a>
    </div>
    <% }) %>
  </div>

  <!-- PopUp -->
  <div class="containerpopup"></div>
  <div class="popup" id="popup">
    <span class="close-button">&times;</span>
    <h2 id="popup-title" class="popup-title m-4"></h2>
    <div id="popup-image" class="popup-image m-2"></div>
    <div id="popup-description" class="popup-description m-1 text-md-center fs-5"></div>
    <ul id="popup-ingredients" class="popup-ingredients"></ul>
  </div>
</body>

<script src="/web/js/vero.js" defer></script>

</html>