<!DOCTYPE html>
<html lang="en">
<%- include("extra/meta", {title: "Thread list!" }) %>

<body style="color: var(--anti); text-align: center;">
  <link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>

  <link rel="stylesheet" href="/css/threads.css" />
  <link rel="stylesheet" href="/css/pages.css" />

  <%- include("extra/navbar") %>
  <h1><%= title || "Threads" %></h1>
  <h2><%= desp %></h2>
  <div class="threads">

    <% threads.forEach(thread=>{ %>
    <a href="<%= thread.getLink() %>" class="">
      <div class="threads-box">
        <div class="thread-box-title">
          <% if (thread.deleted) { %> <span>[DELETED]</span><% } %>
          <%= thread.title  %>
        </div>
        <div class="box-username">
          <% if (user?.admin && !thread.deleted){ %>
          <a class="btn-danger" onclick="fetch('/api/threads/<%= thread.id %>/',{method:'DELETE'})"><i class="bx bx-trash bx-sm"></i></a>
          <% } %>
          <%= thread.author.name %> <div class="avatar"><img src="<%=thread.author.avatar %>"> </div>

        </div>

      </div>
    </a>
    <br>
    <% }); %>

  </div>
  <% if(typeof page === "number"){ %>

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

    <div class="numbers">
      <% for(let i=0; i < pages; i++){ %>
      <a class="number <%= i==page?'active':'' %>" href="/threads?page=<%= i %>"><%= i+1 %></a>
      <% } %>
    </div>

    <div class="after">
      <% if (pages-1 > page) { %>
      <a href="/threads?page=<%= page +1 %>" class='bx bxs-chevron-right'></a>
      <% } %>
    </div>

  </div>
  <% } %>
  <%- include("extra/footer") %>

</body>

</html>