<%- include("../../includes/head.ejs") %>

<div class="flex flex-col gap-5 mt-5">
  <div class="flex justify-between items-center">
    <h2 class="text-2xl">Manage Products Page</h2>
    <a
      href="/add-product"
      class="text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-full text-sm p-2.5 text-center inline-flex items-center mr-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800"
    >
      <%- include("../../components/icons/plus.svg") %>
      <span class="sr-only">Add Product</span>
    </a>
  </div>

  <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
    <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
      <thead
        class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"
      >
        <tr>
          <th scope="col" class="px-6 py-3">Product name</th>
          <th scope="col" class="px-6 py-3">Available</th>
          <th scope="col" class="px-6 py-3">Price</th>
          <th scope="col" class="px-6 py-3">Action</th>
        </tr>
      </thead>
      <tbody>
        <% locals.products?.forEach(product => {%>
        <tr
          class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"
        >
          <th
            scope="row"
            class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
          >
            <%= product.title %>
          </th>
          <td class="px-6 py-4"><%= product.quantity_available %></td>
          <td class="px-6 py-4">$<%= product.price %></td>
          <td class="flex items-center px-6 py-4 space-x-3">
            <a
              href="/edit-product/<%= product.id %>"
              class="font-medium text-green-600 dark:text-green-500 hover:underline"
              >Edit</a
            >
            <a
              href="/delete-product/<%= product.id %>"
              class="font-medium text-red-600 dark:text-red-500 hover:underline"
              >Remove</a
            >
          </td>
        </tr>
        <%})%>
      </tbody>
    </table>
  </div>
</div>

<%- include("../../includes/end.ejs") %>
