<%- include('../includes/head.ejs')  %>
<script defer src="/js/popup.js"></script>
<script defer src="/js/forms.js"></script>
<link rel="stylesheet" href="/css/error.css" />
<link rel="stylesheet" href="/css/queries.css" />
</head>

<body>
<%- include('../includes/navigation.ejs') %>

<!-- MAIN CONTENT -->
<main>
  <!-- ACKNOWLEDGEMENT POPUP -->
  <% if (showPopup) { %>
    <div class="popup-container">
      <div class="popup">
        <h2 class="popup-title">Important Notice</h2>
        <p class="popup-subtitle"><strong>Please read this carefully</strong></p>
        <p class="popup-text">

Urban Stride is a practice project hosted on Render. To optimize costs, the app may reset after inactivity, affecting added products or orders. User sessions and accounts are the only things that persist. Additionally, if you encounter a 505 error by Render, it's not due to a server crash but because the hosting provider has temporarily put it to sleep. In such cases, simply refresh the page after 10-15 seconds. Thank you for your understanding! ğŸ™�ğŸ’»
        </p>
        <p class="popup-text">
          Also, checkout amount must be less than $10,000.00.
        </p>
        <button class="acknowledgePopup">Got It</button>
        <input type="hidden" name="_csrf" value="<%= CSRFToken %>">
        <p class="popup-subtitle"><strong>&copy; Shashank Singh <%= new Date().getFullYear(); %></strong></p>
      </div>
    </div>
  <% }%>


  <div class="container main">
    <% if (products.length > 0 ) { %>
    <!-- PRODUCTS GRID -->
    <div class="products grid grid--3-cols">
      <% for( let product of products ) { %>
      <!-- PRODUCT CARD -->
        <article class="product card">
          <% if (isAuthenticated) { %>
            <form id="submitForm" action="/cart" method="post">
              <button class="add-to-cart" type="submit">
                <span class="material-symbols-outlined">add_shopping_cart</span>
              </button>
              <input type="hidden" name="productId" value="<%= product._id%>">
              <input type="hidden" name="_csrf" value="<%= CSRFToken %>">
            </form>
          <% } %>
        <header>
          <img
            class="product-img"
            src="<%= product.imageUrl %>"
            alt="product image"
          />
          <div class="product-details">
            <p class="product-title"><%= product.title %></p>
            <p class="product-price">$<%= product.price %></p>
          </div>
        </header>

        <footer class="product-actions">
          <form action="/products/<%= product._id %>" method="get">
            <button class="details" type="submit">
              View Details <span class="material-symbols-outlined">east</span>
            </button>
          </form>
        </footer>
        </article>
      <% } %>
    </div>

    <nav class="pagination margin-bottom-md">
      <ul class="pagination-links">
        <% if (currentPage !== 1 && previousPage !== 1) { %>
        <li><a href="?page=1" class="pagination-link">1</a></li>
        <% } %>
        <% if (hasPreviousPage) { %>
          <li><a href="?page=<%= previousPage %>" class="pagination-link"><%= previousPage %></a></li>
        <% } %>
        <li><a href="?page=<%= currentPage %>" class="pagination-link active"><%= currentPage %></a></li>
        <% if (hasNextPage) { %>
          <li><a href="?page=<%= nextPage %>" class="pagination-link"><%= nextPage %></a></li>
        <% } %>
        <% if (lastPage !== currentPage && nextPage !== lastPage) { %>
          <li><a href="?page=<%= lastPage %>" class="pagination-link"><%= lastPage %></a></li>
        <% } %>
      </ul>
    </nav>
    <% } else { %>
      <div class="error-card card card--linear margin-bottom-sm">
        <h1 class="error-code">MT!</h1>
        <p class="error-title">No Products Found!</p>
        <p class="error-subtitle margin-bottom-sm">
          But you can create new ones!
        </p>
        <p class="error-message">[ğŸ›�ï¸� Products took a sabbatical ğŸ›’]</p>
      </div>
      <% } %>
<%- include('../includes/end.ejs') %>