<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Users - LiteLib</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="/css/style.css">

    <!-- Favicon Information -->
    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="194x194" href="/favicon/favicon-194x194.png">
    <link rel="icon" type="image/png" sizes="192x192" href="/favicon/android-chrome-192x192.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
    <link rel="manifest" href="/favicon/site.webmanifest">
    <link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#805a3f">
    <link rel="shortcut icon" href="/favicon/favicon.ico">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="/favicon/mstile-144x144.png">
    <meta name="msapplication-config" content="/favicon/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">
  </head>
  <body>

    <% if(errorMessage) { %>
      <div class="container mt-5">
        <div class="alert alert-danger alert-dismissible" role="alert">
          <%= errorMessage %>
          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
      </div>
    <% } %>

    <% if(message) { %>
      <div class="container mt-5">
        <div class="alert alert-primary alert-dismissible" role="alert">
          <%= message %>
          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
      </div>
    <% } %>

    <div class="container mt-5">
      <h1 class="text-center"><i class="bi bi-people"></i> User Data</h1>

      <div class="table-responsive">
          <table class="table table-bordered">
              <thead>
                  <tr>
                      <th>ID</th>
                      <th>Username</th>
                      <th>Name</th>
                      <th>Role</th>
                      <th>Action</th> 
                  </tr>
              </thead>
              <tbody>
                  <% users.forEach((user, index) => { %>
                      <tr>
                          <td><%= index + 1 %></td>
                          <td><%= user.data.username %></td>
                          <td><%= user.data.name %></td>
                          <td><%= user.data.role %></td>
                          
                            <td>
                              <a href="/edit-users?username=<%= user.data.username %>&name=<%= user.data.name %>&role=<%= user.data.role %>" class="btn btn-info btn-lg"><i class="bi bi-pencil-fill"></i> Edit</a>
                              
                              <% if (user.data.checkout.length === 0) { %>
                                <a class="btn btn-secondary disabled" aria-disabled="true"><i class="bi bi-book-fill"></i> View <%= user.data.checkout.length %> Books</a>
                              <% } else { %>
                                <a href="/user-books?username=<%= user.data.username %>&name=<%= user.data.name %>" class="btn btn-primary btn-lg"><i class="bi bi-book-fill"></i> View <%= user.data.checkout.length %> Books</a>
                              <% } %>
                            </td>
                            
                            
                         
                      </tr>
                  <% }); %>
              </tbody>
          </table>
      </div>
  </div>

  <div class="container mt-5">
    <a href="/" class="btn btn-primary btn-lg"><i class="bi bi-house-door-fill"></i> Home</a>
		<a href="/add-user" class="btn btn-primary btn-lg"><i class="bi bi-person-fill-add"></i> Add User</a>
  </div>

    <script src="/js/message-dismiss.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>
