<!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" id="title"><%= thread.title %></div>
    <div class="date">
      <%= new Date(thread.time).toLocaleString() %> • Views: <%= thread.views %> <%= "• "+(thread.edited  ? "Edited" : "Not edited")%>
    </div>

  </div>
  <div style="text-align:center;padding:8px">
   <!-- THREAD AUTHOR AND PROFILE PHOTO -->
   
   <% if (user && !thread.deleted){ %>

    <a onclick="delete_thread('<%= thread.id %>')" class="btn-outline-primary" >DELETE</a>
    <a onclick="edit_t('<%= thread.id %>')" class="btn-outline-primary" >EDIT</a>
    <% } else if (thread.deleted) { %>
    <h3 style="display:inline;">This thread has been deleted</h3>
    <a onclick="undelete_thread('<%= thread.id %>')" class="btn-primary" >UNDELETE</a>
    
    <% }; %>
  </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" id="dots-<%=message.id %>" onclick="dots('<%=message.id %>')">
        <% if (message.deleted){ %>
        <i class='bx bx-trash bx-sm' id="deleted-<%=message.id %>" style="color: RED;"></i>
        <% } %>
        <% if (message.edited){ %>
        <i class='bx bx-pencil bx-sm' id="edited-<%=message.id %>" style="color: GREEN;"></i>
        <% } %>
        <i class='bx bx-dots-horizontal-rounded' ></i>
      </div>

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

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

    </div>

    <% }); %>
  </div>
  <% if (user){ %>

  <div class="message">
    <form id="send">
      <textarea rows="4" cols="100" name="content"></textarea>
      <input name="threadID" type="hidden" value="<%= thread.id %>"></input>
      <input name="page" type="hidden" value="<%= page %>"></input>

      <script type="module">
        import request from "../../js/request.js";

        document.getElementById("send").addEventListener("submit", async e => {

        e.preventDefault();
    
        const data = new FormData(e.target);

        request("/api/messages", "POST", { threadID: "<%= thread.id %>", content: data.get("content") })
          .then(res => {
            let tp = Number("<%= thread.pages %>")
            let tm = Number("<%= thread.count %>") 
            if (tp*10===tm) tp++;
            if (res) location.href = `/threads/${data.get("threadID")}?page=${tp-1}`;

          });
        });
      </script>
      <button class="btn-primary">Send!</button>
    
    </form>
  </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 < thread.pages; i++){ %>
      <a class="number <%= i==page?'active':'' %>" href="<%= thread.getLink() %>?page=<%= i %>"><%= i+1 %></a>
      <% } %>
    </div>

    <div class="after">
      <% if (thread.pages-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>