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

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

      <!-- MAIN CONTENT -->
      <main>
        <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">
                  <form id="submitForm" action="/admin/delete-product" method="post">
                    <button id="deleteButton" class="deleteButton add-to-cart" type="button">
                      <span class="material-symbols-outlined">delete</span>
                    </button>
                    <input type="hidden" name="id" 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="/admin/edit-product/<%= product._id %>?edit=true" method="post">
                      <button class="details" type="submit">
                        Edit Product <span class="material-symbols-outlined">east</span>
                      </button>
                      <input type="hidden" name="_csrf" value="<%= CSRFToken %>">
                    </form>
                  </footer>
                </article>
                <% } %>
            </div>
            <% } 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') %>