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

<%- include("extra/meta", {title: "Welcome to the " + dataset.forum_name }) %>


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


  <div class="container my-3">
    <nav class="breadcrumb">
      <span class="breadcrumb-item active">
        <% if (user) { %>
        Welcome, <%= user.name %>
        <% } else { %>
        Welcome, Guest! <a href="/register">You can press here to register.</a>
        <% } %>
      </span>
    </nav>
    <div class="row">
      <div class="col-12 col-xl-9">

        <div class="category">

          <h2 class="h4 text-white bg-danger mb-0 p-4 rounded-top">New threads</h2>
          <table class="table table-striped table-bordered table-responsive">
            <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>
              <% newestThreads.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 class="category">

          <h2 class="h4 text-white  bg-danger mb-0 p-4 rounded-top">New messages</h2>
          <table class="table table-striped table-bordered table-responsive">
            <thead class="thead-light">
              <tr>
                <th scope="col" class="forum-col">Message</th>
                <th scope="col">Date</th>
                <th scope="col" class="last-post-col">Author</th>
              </tr>
            </thead>
            <tbody>
              <% newestMessages.forEach(message => { %>
              <tr>
                <td>
                  <p class="mb-0">
                    <a href="<%= message.getLink() %>"> <%= message.content.slice(0, 100) %></a>
                  </p>
                </td>
                <td>
                  <div><%= new Date(message.time).toLocaleString() %></div>
                </td>
                <td>
                  <div class="avatar">by <a href="<%= message.getLink() %>"><%= message.author.name %></a><img src="<%=message.author.avatar %>"></div>
                </td>
              </tr>
              <% }) %>
            </tbody>
          </table>
        </div>
      </div>


      <div class="col-12 col-xl-3">
        <aside>
          <div class="row">
            <div class="col-12 col-sm-6 col-xl-12">
              <div class="card mb-3 mb-sm-0 mb-xl-3">
                <div class="card-body">
                  <h2 class="h4 card-title">Members online</h2>
                  <ul class="list-unstyled mb-0">
                    <li>
                      <% onlineUsers.forEach(user => { %>
                      <a href="/users/<%=user.id  %>"><%= user.name %></a>
                      <% }); %>
                    </li>
                  </ul>
                </div>
                <div class="card-footer">
                  <dl class="row mb-0">
                    <dt class="col-8">Total:</dt>
                    <dd class="col-4 mb-0"><%= onlineUserCount %></dd>
                  </dl>
                </div>
              </div>
            </div>
            <div class="col-12 col-sm-6 col-xl-12">
              <div class="card">
                <div class="card-body">
                  <h2 class="h4 card-title">Forum statistics</h2>
                  <dl class="row mb-0">
                    <dt class="col-8">Total categories:</dt>
                    <dd class="col-4 mb-0"><%= categories %></dd>
                  </dl>
                  <dl class="row mb-0">
                    <dt class="col-8">Total threads:</dt>
                    <dd class="col-4 mb-0"><%= threads %></dd>
                  </dl>
                  <dl class="row mb-0">
                    <dt class="col-8">Total messages:</dt>
                    <dd class="col-4 mb-0"><%= messages %></dd>
                  </dl>
                  <dl class="row mb-0">
                    <dt class="col-8">Total members:</dt>
                    <dd class="col-4 mb-0"><%= users %></dd>
                  </dl>
                </div>
                <div class="card-footer">
                  <div>Newest member:</div>
                  <div><a href="/users/<% newestMember.id %>"><%= newestMember.name %></a></div>
                </div>
              </div>
            </div>
          </div>
        </aside>
      </div>
    </div>
  </div>

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

</body>

</html>