<!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-8 mt-4"
    >
      User list
    </h1>

    <div class="container flex flex-col justify-center m-auto">
      <div class="actions flex justify-center">
        <a
          href="/admin/new/"
          class=" m-2 shadow py-2 px-8 text-2xl bg-teal-400 text-center rounded m-2 justify-center  text-white font-bold hover:bg-teal-500 lg:flex"
        >
          CREATE
        </a>
        <a
          href="/admin"
          class=" m-2 shadow py-2 px-8 text-2xl bg-<%= colorTheme %>-500 text-center rounded m-2 justify-center  text-white font-bold hover:bg-<%= colorTheme %>-600 lg:flex"
        >
          <i
            class="fas fa-chevron-left text-white fa-sm  self-center mr-2 hover:mr-2 "
          ></i
          >BACK</a
        >
      </div>
      <div class="table flex mx-auto">
        <% usersDB.forEach(function(user){ %>
        <div
          class="flex justify-center text-xl bg-white items-center max-w-4xl lg:m-2 "
        >
          <p class="p-4 m-4 w-32  overflow-y-auto"><%= user.username %></p>
          <p class="p-4 bg-white w-32 overflow-x-auto overflow-y-auto sm:w-56">
            <%= user.email %>
          </p>
          <p class="p-4 bg-white w-32  overflow-y-auto">
            <%= user.tokens %><%= tokenSymbol %>
          </p>

          <% if(user.admin){ %>
          <p
            class="p-4 w-32 bg-white text-red-500  font-bold w-32  overflow-y-auto"
          >
            Admin <% } else { %>
          </p>

          <p class=" p-4 bg-white w-32  overflow-y-auto">User <% } %></p>

          <div class="edit p-2 bg-white w-56  overflow-y-auto">
            <a
              href="/admin/edit/<%= user.username %>"
              class=" w-32 shadow p-2 bg-<%= colorTheme %>-500 text-center rounded m-2 justify-center  w-32 border-b-2 border-<%= colorTheme %>-500 overflow-y-auto text-white font-bold hidden hover:bg-<%= colorTheme %>-400 lg:flex"
            >
              EDIT
            </a>
          </div>
        </div>
        <% }) %>
      </div>
    </div>

    <div class="container flex flex-col justify-center mx-auto"></div>

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