<!DOCTYPE html>
<html lang="en">
<%- include(dataset.getFile(dataset.theme.codename +"/views/extra/meta"), {title: "Thread list!" }) %>

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

  <%- include(dataset.getFile(dataset.theme.codename +"/views/extra/navbar")) %>


  <div class="container my-3">
    <div class="row">
      <div class="col-12">
        <h2 class="h4 text-white  bg-info mb-0 p-4 rounded-top"><%= title || "Threads" %></h2>
        <h3 class="h6 text-white  bg-info mb-0 p-4 rounded-top"><%= desp %></h2>

          <table class="table table-striped table-bordered table-responsive-lg">
            <thead class="thead-light">
              <tr>
                <th scope="col" class="topic-col">Topic</th>
                <th scope="col" class="created-col">Created</th>
                <th scope="col">Statistics</th>
                <% if (user?.admin){ %> <th scope="col" class="last-post-col">Action</th> <% } %>
              </tr>
            </thead>
            <tbody>

              <% threads.forEach(thread=>{ %>
              <tr>
                <td>
                  <h3 class="h6">
                    <% if (thread.deleted) { %> <span class="badge badge-primary">[DELETED]</span><% } %>
                    <a href="<%= thread.getLink() %>"><%= thread.title  %></a>
                  </h3>
                </td>
                <td>
                  <div class="avatar">by <a href="/users/<%= thread.authorID %>"><%= thread.author.name %></a><img src="<%=thread.author.avatar %>"></div>
                  <div><%= new Date(thread.time).toLocaleString() %></div>
                </td>
                <td>
                  <div><%= thread.messages.length %> messages</div>
                  <div><%= thread.views %> views</div>
                </td>
                <% if (user?.admin){ %>
                <td>
                  <% if (!thread.deleted){ %>
                  <a class="btn-danger" onclick="fetch('/api/threads/<%= thread.id %>/',{method:'DELETE'})"><i class="bx bx-trash bx-sm"></i></a>
                  <% } %>
                </td>
                <% } %>
              </tr>
              <% }); %>
            </tbody>
          </table>
      </div>
    </div>
    <div class="mb-3 clearfix">
      <nav aria-label="Navigate post pages" class="float-lg-right">
        <ul class="pagination pagination-sm mb-lg-0">
          <% if (page > 0){ %>
          <li class="page-item"><a href="/threads?page=<%= page-1 %>" class="page-link">Back</a></li>
          <% } %>
          <% for(let i=0; i < pages; i++){ %>
          <li class="page-item <%= i==page?'active':'' %>"><a href="/threads?page=<%= i %>" class="page-link"><%= i+1 %>
              <% if (i==page){ %>
              <span class="sr-only">(current)</span>
              <% } %>
            </a></li>
          <% } %>
          <% if (pages-1 > page) { %>
          <li class="page-item"><a href="/threads?page=<%= page+1 %>" class="page-link">Next</a></li>
          <% } %>
        </ul>
      </nav>
    </div>
    <a href="/threads/create" class="btn btn-lg btn-primary">New Thread</a>
  </div>
  <%- include(dataset.getFile(dataset.theme.codename +"/views/extra/footer")) %>

</body>

</html>