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

<%- include("extra/meta", {title: thread.title }) %>


<body>
  <%- include("extra/navbar") %>
  <link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>

  <link rel="stylesheet" href="/css/thread.css" />
  <% if (user){ %>
  <script type="module" src="/js/thread.js"></script>
  <% }; %>
  <div style="text-align:center;padding:8px">
    <div class="title"><%= thread.title %></div>
    <div class="date">
      <%= new Date(thread.time).toLocaleString() %> • Views: <%= thread.views %>
    </div>
  </div>
  <div id="messages" value="<%= thread.id %>">

  <% messages.filter(Boolean).forEach(message=>{ %>

  <div class="message" id="message-<%= message.id %>">
    <div class="left">
      <img src="<%= message.author.avatar || '/images/guest.png' %>"/>
      <div class="username"><a href="/users/<%=message.author.id %>"><%=message.author.name %></a></div>
      <div class="date">
        <%= new Date(message.time).toLocaleDateString() %> 
      </div>
      <div class="date">
        <%= new Date(message.time).toLocaleTimeString() %> 
      </div>
    </div>  

    <div class="content"><%- message.content %></div>
<% if(user){ %>
  <% if(user.id === message.author.id || user.admin){ %>

    <div class="dots" onclick="dots('<%=message.id %>')">
      <i class='bx bx-dots-horizontal-rounded' ></i>
    </div>

    <% if (!message.deleted){ %>
              
      <div class="dots-menu" id="dot-<%=message.id %>">
        <a onclick="delete_message('<%=message.id %>');">Delete</a>
        <a onclick="edit_message('<%=message.id %>');">Edit</a>
      </div>
      <% }else if (user.admin){ %>
        <div class="dots-menu" id="dot-<%=message.id %>">
          <a onclick="undelete_message('<%=message.id %>');">UNDELETE</a>
        </div>
  <% } %>
   
  <% } %>

  
  <div class="reactions">
    <div>
<i class='bx bx-like'></i> <%=message.react.like.length %>
    </div>
    <div>
<i class='bx bx-dislike'></i> <%=message.react.dislike.length %>
    </div>
  </div>
  <% }; %>

  </div>

    <% }); %>
  </div>
  <div class="pagination">
    <div class="back">
    <% if (page > 0){ %>
      <a href="<%= thread.getLink() %>?page=<%= page-1 %>" class='bx bxs-chevron-left'></a>
    <% } %>  
    </div>
    

    <div class="numbers">
      <% for(let i=0;i< Math.ceil(messages.length/10);i++){ %>
      <a class="number <%= i==page?'active':'' %>" href="<%= thread.getLink() %>?page=<%= i %>"><%= i %></a>
      <% } %>
    </div>

    <div class="after">
    <% if (Math.ceil(messages.length/10)-1 > page){ %>
      <a href="<%= thread.getLink() %>?page=<%= page +1 %>" class='bx bxs-chevron-right'></a>
    <% } %>
    </div>
 
  </div>

  <script>
    document.getElementById("message-<%= scroll  %>").scrollIntoView();
    function dots(id) {
      document.getElementById('dot-'+id).classList.toggle('active')
    }
  </script>

</body>

</html>