<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>myBloog :: <%= page %></title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" />
  <link rel="stylesheet" href="/styles/global.css" />
</head>

<body>
  <%- include('./components/navbar.ejs') %>
  <!-- Profile -->
  <div class="blogs">
    <div class="card text-bg-dark col-md-4 col-10 mb-2">
      <!-- Blog User -->
      <div class="card-header position-relative d-flex">
        <!-- User name and image -->
        <div style="width: 50%;">
          <img src="<%= profile.img %>" class="rounded-circle mr-2" alt="User Profile" style="width: 90px; height: 90px;">
          <h5 class="mt-2"><%= profile.username %></h5>
        </div>
        <% if (profile.id === user.id) { %>
        <!-- blog settings -->
        <div class="position-absolute end-0">
          <div class="dropdown">
            <button class="btn text-bg-dark" data-bs-toggle="dropdown">
              <i class="bi bi-three-dots"></i>
            </button>
            <ul class="dropdown-menu dropdown-menu-dark">
              <li><a class="dropdown-item" href="/settings">Edit profile</a></li>
            </ul>
          </div>
        </div>
        <% } %>
      </div>
      <!-- Profile description -->
      <div class="card-body">
        <p><%= profile.description %></p>
        <small>Joined <span><%= profile.createdAt %></span></small>

      </div>
      <!-- Profile icons -->
      <div class="d-flex card-footer">
        <div class="icons">
          <p class="icon"><span class="followers"><%= profile.followers %></span>-<small>Followers</small></p>
          <p class="icon"><span><%= profile.follow %></span>-<small>Following</small></p>
        </div>
        <% if (profile.id != user.id) { %>
        <div class="d-flex justify-content-end" id="<%= profile.id %>" style="width: 70%;">
          <button class="btn btn-outline-primary" id="follow">Folow</button>
        </div>
        <% } %>
      </div>
    </div>
  </div>
  <div class="blogs">
    <% if (blogs.length != 0) { %>
    <% blogs.forEach(blog => { %>
    <%- include('./components/blog.ejs', { blog: blog, link: true }) %>
    <% }) %>
    <% } else {%>
    <h1 class="text-bg-dark">This user havent blogs.</h1>
    <% }%>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>

<script src="/scripts/index.js"></script>
<script>
  const followBtn = document.querySelector("#follow");
  let followBool = ('<%= profile.followStatus %>' == 1) ? false : true;
  const followers = document.querySelector(".followers")

  followBtn.addEventListener("click", function(e) {
    followCheck();
    (followBool) ? followers.innerHTML++: followers.innerHTML--;
    followQuery(followBool);
  });

  function followCheck() {
    if (!followBool) {
      followBtn.innerHTML = "Followed"
      followBtn.classList = "btn btn-outline-success"
      followBool = true
    } else {
      followBtn.innerHTML = "Follow"
      followBtn.classList = "btn btn-outline-primary"
      followBool = false
    }
  }
  followCheck()

  function followQuery(status) {
    const profileId = followBtn.parentNode.id

    const xhttp = new XMLHttpRequest();
    const formData = new FormData();

    // add profileId and status
    formData.append("profileId", profileId);
    formData.append("status", status);

    xhttp.open("POST", "/profile/subsribe");
    xhttp.send(formData);
  }
</script>

</html>