<% if (product) {%>
<div
  class="w-full max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 flex flex-col justify-between"
>
  <a href="/<%= product.id %>">
    <img
      class="p-8 rounded-t-lg"
      src="<%= product.imagePath %>"
      alt="<%= product.title %>"
    />
  </a>
  <div class="px-5 pb-5">
    <a href="/<%= product.id %>">
      <h5
        class="text-xl font-semibold tracking-tight text-gray-900 dark:text-white"
      >
        <%= product.title %>
      </h5>
    </a>
    <div class="flex items-center justify-between">
      <span class="text-3xl font-bold text-gray-900 dark:text-white"
        >$<%= product.price %></span
      >
      <a
        href="/cart/<%= product.id %>"
        class="text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800"
        >Add to cart</a
      >
    </div>
  </div>
</div>
<% } %>
