<!DOCTYPE html>
<html lang="en">
  <%- include("partial/header") %>

  <body class="bg-gray-200 h-screen">
    <!--     NAV BAR  
    -->

    <%- include("partial/nav") %>

    <!--     END OF NAV BAR
-->

    <h1
      class="text-<%= colorTheme %>-500 text-3xl mx-auto flex justify-center mb-12 mt-4"
    >
      Hello Admin, welcome to your Dashboard
    </h1>

    <div
      class="container flex flex-col justify-center mx-auto sm:flex-wrap sm:flex-row "
    >
      <div
        class="tokens bg-white rounded p-8 text-center text-<%= colorTheme %>-500 text-xl m-4"
      >
        <h1 class="mb-2">Total number of <%= nameOfYourToken %></h1>

        <% function totalTokens(){ let totTokens = 0;
        usersDB.forEach(function(user){ totTokens = totTokens + user.tokens; });
        return totTokens; } %>

        <h1 class="text-<%= colorTheme %>-500"><%= totalTokens() %></h1>
      </div>
      <div
        class="tokens bg-white rounded p-8 text-center text-<%= colorTheme %>-500 text-xl m-4"
      >
        <h1 class="mb-2">Total number of users</h1>

        <% function totalUsers(){ let totUser = 0;
        usersDB.forEach(function(user){ totUser = totUser + 1}); return totUser;
        } %>

        <h1 class="text-<%= colorTheme %>-500"><%= totalUsers() %></h1>
      </div>
      <div
        class="tokens bg-white rounded p-8 text-center text-<%= colorTheme %>-500 text-xl m-4"
      >
        <h1 class="mb-2">Access User list</h1>
        <a href="/admin/user-list">Edit</a>
      </div>
    </div>

    <!--  TODO   <div class="stats flex">
      Total number of Tonkens: 
    </div> -->
  </body>
</html>
