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

<body>
  <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"><%= "Categories" %></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">Description</th>
              <% if (user?.admin){ %> <th scope="col" class="last-post-col">Action</th> <% } %>
            </tr>
          </thead>
          <tbody>
            <% categories.forEach(category=>{ %>
                <tr>
                    <td>
                      <h3 class="h6">
                        <a href="<%= category.getLink() %>"><%= category.name %></a>
                      </h3>
                    </td>
                    <td>
                      <div><%= category.desp %></div>
                    </td>
                    <% if (user?.admin){ %>
                    <td>
                      <a class="btn-danger" onclick="fetch('/api/categories/<%= category.id %>/',{method:'DELETE'})"><i class="bx bx-trash bx-sm"></i></a>
                    </td>
                    <% } %>
                  </tr>
            <% }); %>

          </tbody>
        </table>
      </div>
    </div>


    <% if(typeof page === "number"){ %>
    <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="/categories?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="/categories?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="/categories?page=<%= page+1 %>" class="page-link">Next</a></li>
          <% } %>
        </ul>
      </nav>
    </div>

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

</body>

</html>