<% include ./partials/header.ejs %>
<div class="w-full min-h-screen bg-zinc-800 px-5 sm:px-10 py-8 text-white">
  <div class="container mx-auto">
    <div
      class="cards grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"
    >
      <% posts.forEach(function(elem){ %>
      <div
        class="card bg-zinc-700 rounded-lg overflow-hidden shadow-lg transform transition-all hover:scale-105"
      >
        <div class="w-full h-40 overflow-hidden">
          <img
            class="w-full h-full object-cover"
            src="/images/uploads/<%= elem.image %>"
            alt="<%= elem.title %>"
          />
        </div>
        <div class="p-4">
          <h5 class="mt-2 text-lg font-bold"><%= elem.title %></h5>
          <h6 class="text-sm font-semibold text-gray-400">
            <%= elem.user.username %>
          </h6>
        </div>
      </div>
      <% }) %>
    </div>
  </div>
</div>
<% include ./partials/footer.ejs %>
