<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Books - 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>

<!-- <div class="container mt-5">
    <h1 class="text-center">Welcome <%= user.name %></h1>
</div> -->

    <% if(errorMessage) { %>
      <div class="container mt-5">
        <div class="alert alert-danger alert-dismissible" role="alert">
          <%= errorMessage %>
          <button id="removeMessageButton" 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 id="removeMessageButton" 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-book"></i> Books</h1>

      <% if(books.length != 0) { %>
      <div class="table-responsive">
          <table class="table table-bordered">
              <thead>
                  <tr>
                      <th>ID</th>
                      <th>Name</th>
                      <th>Author</th>
                      <th>Year</th>
                      <th>Genre</th>
                      <th>ISBN</th>
                      <th>ISBN10</th>
                      <th>Copies</th>
                      <th>Actions</th>
                  </tr>
              </thead>
              <tbody>
                  <% books.forEach((book, index) => { %>
                      <tr>
                          <td><%= index + 1 %></td>
                          <td><%= book.data.name %></td>
                          <td><%= book.data.author %></td>
                          <td><%= book.data.year %></td>
                          <td><%= book.data.genre %></td>
                          <td><%= book.data.ISBN %></td>
                          <td><%= book.data.ISBN10 %></td>
                          <td><%= book.data.checkout.length %> / <%= book.data.copies %></td>
                          <td>
                          <% if (!user.checkout.includes(book.ID)) { %>
                            <a href="/checkout?name=<%= encodeURIComponent(book.data.name) %>" class="btn btn-success btn-lg"><i class="bi bi-cart-check-fill"></i> Checkout</a>
                          <% } %>
                          <% if (user.checkout.includes(book.ID)) { %>
                            <a href="/return?bookID=<%= encodeURIComponent(book.ID) %>" class="btn btn-warning btn-lg"><i class="bi bi-basket-fill"></i> Return</a>
                          <% } %>

                          <% if (user.role == "admin") { %>
                            <% if (book.data.checkout.length === 0) { %>
                              <a class="btn btn-secondary btn-lg disabled" aria-disabled="true"><i class="bi bi-people-fill"></i> View <%= book.data.checkout.length %> Users</a>
                            <% } else { %>
                              <a class="btn btn-primary btn-lg" href="/checkout-books?bookID=<%= book.ID %>"><i class="bi bi-people-fill"></i> View <%= book.data.checkout.length %> Users</a>
                            <% } %>
                              <a href="/edit-book?name=<%= encodeURIComponent(book.data.name) %>" class="btn btn-info btn-lg"><i class="bi bi-pencil-fill"></i> Edit</a>
                          <% } %>
                        </td>
                      </tr>
                  <% }); %>
              </tbody>
          </table>
      </div>
      <% } else {%>
        <div class="container mt-5">
          <h2 class="text-center">No Books in Database</h2>
        </div>
      <% }%>
  </div>

  <div class="container mt-5">
    <!-- <a href="/logout" class="btn btn-primary">Logout</a> -->
    <a href="/" class="btn btn-primary btn-lg"><i class="bi bi-house-door-fill"></i> Home</a>
    <% if (user.role == "admin") { %>
			<a href="/add-book" class="btn btn-primary btn-lg"><i class="bi bi-plus-square-fill"></i> Add Book</a>
		<% } %>
    <a href="/scan-book" class="btn btn-success btn-lg"><i class="bi bi-upc-scan"></i>  Checkout Book via Scan</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>