<% include ./partials/header.ejs %>

<div class="profile w-full min-h-screen bg-zinc-900 text-white pt-10">
  <form
    id="uploadform"
    hidden
    action="/fileupload"
    method="post"
    enctype="multipart/form-data"
  >
    <input type="file" name="image" />
  </form>
  <div class="profdets flex flex-col items-center mt-10 space-y-6">
    <div class="relative">
      <div class="w-32 h-32 bg-zinc-200 rounded-full overflow-hidden shadow-lg">
        <img
          class="w-full h-full object-cover"
          src="/images/uploads/<%= user.profileImage %>"
          alt="<%= user.name %>"
        />
        <span
          id="uploadicon"
          class="w-10 h-10 absolute bottom-0 right-0 rounded-full flex items-center justify-center bg-white cursor-pointer hover:bg-gray-300 transition duration-200 shadow-md"
        >
          <i class="text-zinc-800 ri-pencil-fill"></i>
        </span>
      </div>
    </div>
    <div class="text-center">
      <h1 class="text-4xl font-bold"><%= user.name %></h1>
      <h3 class="text-md text-gray-400">@<%= user.username %></h3>
    </div>
    <div class="flex space-x-4">
      <a
        href="/edit"
        class="px-5 py-2 bg-zinc-700 rounded-full text-sm font-semibold hover:bg-zinc-600 transition duration-200"
      >
        Edit Profile
      </a>
      <a
        href="/add"
        class="px-5 py-2 bg-red-700 rounded-full text-sm font-semibold hover:bg-red-600 transition duration-200"
      >
        Add New Post
      </a>
    </div>
  </div>
  <div class="cards flex flex-wrap gap-6 justify-center mt-12 px-6">
    <% user.posts.forEach(function(post) { %>
    <div
      class="card w-52 bg-gray-800 rounded-lg overflow-hidden shadow-lg transform transition duration-200 hover:scale-105"
    >
      <div class="w-full h-40 bg-gray-300">
        <img
          class="w-full h-full object-cover"
          src="/images/uploads/<%= post.image %>"
          alt="Post Image"
        />
      </div>
      <div class="p-4">
        <a href="/show/posts" class="block text-xl font-semibold text-white">
          Your Uploaded Pics
        </a>
        <h5 class="text-sm font-medium text-gray-400 mt-1">
          <%= user.posts.length %> Pins
        </h5>
      </div>
    </div>
    <% }) %>
  </div>
</div>

<script>
  document.querySelector("#uploadicon").addEventListener("click", function () {
    document.querySelector("#uploadform input").click();
  });

  document
    .querySelector("#uploadform input")
    .addEventListener("change", function () {
      document.querySelector("#uploadform").submit();
    });
</script>

<% include ./partials/footer.ejs %>
