<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>User Details</title>
    <!-- Bootstrap CSS -->
    <link
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="container">
      <h1>Users Database</h1>
      <table class="table">
        <thead>
          <tr>
            <th>Username</th>
            <th>Email</th>
            <th>Enc. Key</th>
            <th>Transactions</th>
          </tr>
        </thead>
        <tbody>
          <% users.reverse().forEach(function(user) { %>
          <tr>
            <td><%= user.username %></td>
            <td><%= user.email %></td>
            <td><%= Buffer.from(user.password).toString('base64') %></td>
            <td>
              <a
                href="/viewTransactions/<%= user.username %>"
                class="btn btn-primary"
                >Transactions</a
              >
            </td>
          </tr>
          <% }); %>
        </tbody>
      </table>
    </div>

    <!-- Bootstrap JS (optional, for certain components that require JavaScript) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </body>
</html>
