<div class="comment">
  <!-- Blog Comments Start -->
  <div class="card text-bg-dark  <%= (accordion)? "col-12" : "col-md-4 col-10 mb-2" %>">
    <!-- Comments body -->
    <div class="card-body">
      <!-- Comments User -->
      <div class="position-relative d-flex">
        <!-- User name and image -->
        <div class="d-flex align-items-center" onclick="myhref('/profile/<%= comm.userId %>');" style="cursor:pointer; width: 50%;">
          <img src="<%= comm.userImage %>" class="rounded-circle mr-2" alt="User Profile" style="width: 40px; height: 40px;" />
          <h5 class="ms-2"><%= comm.username %></h5>
        </div>
        <!-- Comments 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">
              <!-- Post viewers settings -->
              <li>
                <a class="dropdown-item" href="/comment/<%= comm.id %>">View comment</a>
              </li>
              <% if (user.id === comm.userId) { %>

              <li>
                <button class="dropdown-item text-danger comm-delete-btn" id="<%= comm.id %>">Delete comment</button>
              </li>
              <% } else {%>
              <li>
                <a class="dropdown-item" href="/profile/<%= comm.userId %>">Subscribe to <%= comm.username %></a>
              </li>
              <% }%>
            </ul>
          </div>
        </div>
      </div>

      <!-- Comments text -->
      <div class="ms-5" <%= (link)? `onclick=myhref('/comment/${comm.id}'); style=cursor:pointer;` : ""%>>
        <p class="card-text"><%= comm.text %></p>
        <p class="card-text">
          <small><%= comm.created_at %></small>
        </p>
      </div>

      <!-- Comment footer -->
      <div class="card-footer icons">
        <!-- Like Icon -->
        <div class="icon" title="like">
          <div class="con-like">
            <input class="like" type="checkbox" title="like" <%= (comm.likestatus == 1)? "checked" : ""%> />
            <div class="checkmark">
              <svg xmlns="http://www.w3.org/2000/svg" class="outline" viewBox="0 0 24 24">
                <path d="M17.5,1.917a6.4,6.4,0,0,0-5.5,3.3,6.4,6.4,0,0,0-5.5-3.3A6.8,6.8,0,0,0,0,8.967c0,4.547,4.786,9.513,8.8,12.88a4.974,4.974,0,0,0,6.4,0C19.214,18.48,24,13.514,24,8.967A6.8,6.8,0,0,0,17.5,1.917Zm-3.585,18.4a2.973,2.973,0,0,1-3.83,0C4.947,16.006,2,11.87,2,8.967a4.8,4.8,0,0,1,4.5-5.05A4.8,4.8,0,0,1,11,8.967a1,1,0,0,0,2,0,4.8,4.8,0,0,1,4.5-5.05A4.8,4.8,0,0,1,22,8.967C22,11.87,19.053,16.006,13.915,20.313Z"></path>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" class="filled" viewBox="0 0 24 24">
                <path d="M17.5,1.917a6.4,6.4,0,0,0-5.5,3.3,6.4,6.4,0,0,0-5.5-3.3A6.8,6.8,0,0,0,0,8.967c0,4.547,4.786,9.513,8.8,12.88a4.974,4.974,0,0,0,6.4,0C19.214,18.48,24,13.514,24,8.967A6.8,6.8,0,0,0,17.5,1.917Z"></path>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" height="100" width="100" class="celebrate">
                <polygon class="poly" points="10,10 20,20"></polygon>
                <polygon class="poly" points="10,50 20,50"></polygon>
                <polygon class="poly" points="20,80 30,70"></polygon>
                <polygon class="poly" points="90,10 80,20"></polygon>
                <polygon class="poly" points="90,50 80,50"></polygon>
                <polygon class="poly" points="80,80 70,70"></polygon>
              </svg>
            </div>
          </div>
          <span class="likes" id='[<%= comm.blog_id %>, <%= comm.id %>]'><%= comm.likes %></span>
        </div>

        <!-- Comments Icon -->
        <div class="icon" title="comments"><i class="bi bi-chat-dots-fill" onclick="myhref('/comment/<%= comm.id %>');"></i><%= comm.comments %></div>

        <!-- Views Icon -->
        <div class="icon text-info" title="views">
          <i class="bi bi-eye-fill"></i><%= comm.views %>
        </div>
      </div>
    </div>
  </div>
</div>