<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Dashboard</title>
    <!-- Bootstrap CSS for styling -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr"
      crossorigin="anonymous"
    />

    <!--
      setAction JS function dynamically sets the form action and required fields
      based on which button is clicked (Create, Update, Delete)
    -->
    <script>
      function setAction(action) {
        const form = document.getElementById("myForm");
        form.action = action;

        // For deleteUser, only username and password are required
        if (action === "/deleteUser") {
          const first_name = document.getElementById("first_name");
          const last_name = document.getElementById("last_name");
          const email = document.getElementById("email");

          first_name.removeAttribute("required");
          last_name.removeAttribute("required");
          email.removeAttribute("required");
        }

        // For createUser and updateUser, all fields are required
        if (action === "/createUser" || action === "/updateUser") {
          const first_name = document.getElementById("first_name");
          const last_name = document.getElementById("last_name");
          const username = document.getElementById("username");
          const password = document.getElementById("password");
          const email = document.getElementById("email");

          first_name.setAttribute("required", "required");
          last_name.setAttribute("required", "required");
          username.setAttribute("required", "required");
          password.setAttribute("required", "required");
          email.setAttribute("required", "required");
        }
      }
    </script>
  </head>
  <body class="bg-dark text-light">
    <div class="container py-5">
      <!-- Header with greeting and logout button -->
      <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
          <!-- Displays user's first name from server-side variable -->
          <h2>Hello, <%= sqlResult.user.first_name %>!</h2>
        </div>
        <div>
          <h3>Welcome to your dashboard</h3>
        </div>
        <div>
          <!-- Logout button -->
          <a href="/" class="btn btn-info">Logout</a>
        </div>
      </div>

      <!-- Card containing the user form for create, update, delete -->
      <div class="card text-dark shadow">
        <div class="card-body">
          <h4 class="card-title mb-4">
            <strong
              ><i
                ><span class="text-primary">Create</span> /
                <span class="text-warning">Update</span> /
                <span class="text-danger">Delete</span></i
              ></strong
            >
            a user
          </h4>
          <!-- Main user form, method POST, action set dynamically -->
          <form id="myForm" method="post">
            <div class="row g-3">
              <!-- First Name input -->
              <div class="col-md-6">
                <label for="first_name" class="form-label"
                  ><strong>First Name</strong></label
                >
                <input
                  type="text"
                  name="first_name"
                  id="first_name"
                  class="form-control"
                  placeholder="First name"
                  required
                />
              </div>

              <!-- Last Name input -->
              <div class="col-md-6">
                <label for="last_name" class="form-label"
                  ><strong>Last Name</strong></label
                >
                <input
                  type="text"
                  name="last_name"
                  id="last_name"
                  class="form-control"
                  placeholder="Last name"
                  required
                />
              </div>

              <!-- Username input (cannot be changed) -->
              <div class="col-md-6">
                <label for="username" class="form-label"
                  ><strong
                    >Username -
                    <span class="text-danger">CANNOT BE CHANGED</span></strong
                  ></label
                >
                <input
                  type="text"
                  name="username"
                  id="username"
                  class="form-control"
                  placeholder="Username"
                  required
                />
              </div>

              <!-- Email input -->
              <div class="col-md-6">
                <label for="email" class="form-label"
                  ><strong>Email</strong></label
                >
                <input
                  type="email"
                  name="email"
                  id="email"
                  class="form-control"
                  placeholder="Email"
                  required
                />
              </div>

              <!-- Password input -->
              <div class="col-12">
                <label for="password" class="form-label"
                  ><strong>Password</strong></label
                >
                <input
                  type="password"
                  name="password"
                  id="password"
                  class="form-control"
                  placeholder="Password"
                  required
                />
              </div>
              <!--
                Alert and success messages, shown conditionally
                Uses EJS to check for alert or success variables
              -->
              <% if (alert !== null) { %>
              <div class="col-12 d-flex align-items-center">
                <div
                  class="alert alert-danger text-center w-100 mb-0 py-0 px-2"
                  role="alert"
                  style="
                    height: 38px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  "
                >
                  <%= alert %>
                </div>
              </div>
              <% } else if (success !== null) { %>
              <div class="col-12 d-flex align-items-center">
                <div
                  class="alert alert-success text-center w-100 mb-0 py-0 px-2"
                  role="alert"
                  style="
                    height: 38px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  "
                >
                  <%= success %>
                </div>
              </div>
              <% } %>
            </div>

            <!-- Action buttons for Create, Update, Delete -->
            <div class="row text-center gy-1 mt-4">
              <div class="col-sm">
                <button
                  type="submit"
                  onclick="setAction('/createUser')"
                  class="btn btn-primary w-100"
                >
                  Create User
                </button>
              </div>

              <div class="col-sm">
                <button
                  type="submit"
                  onclick="setAction('/updateUser')"
                  class="btn btn-warning w-100"
                >
                  Update User
                </button>
              </div>

              <div class="col-sm">
                <button
                  type="submit"
                  onclick="setAction('/deleteUser')"
                  class="btn btn-danger w-100"
                >
                  Delete User
                </button>
              </div>

              <div class="col-sm">
                <button
                  type="button"
                  onclick="callFunc('fetchAllUsers')"
                  class="btn btn-info w-100"
                >
                  Fetch all Users
                </button>
              </div>
            </div>
          </form>
        </div>
        <!-- Card footer with note about delete requirements -->
        <div class="card-footer">
          <p class="text-center mb-0">
            <strong>Note:</strong> When <strong>deleting a user</strong>, you
            only need to provide the username and password. Other fields are not
            required.
          </p>
        </div>
      </div>

      <div class="user-table">
        <h4 class="mt-5 mb-3">All Users</h4>
        <!-- Table to display all users -->
        <table class="table">
          <thead>
            <tr>
              <th scope="col">id</th>
              <th scope="col">Username</th>
              <th scope="col">First name</th>
              <th scope="col">Last name</th>
              <th scope="col">E-Mail</th>
              <th scope="col">Password</th>
              <th scope="col">Created</th>
            </tr>
          </thead>
          <tbody class="table-group-divider">
            <% users.forEach(user => { %>
            <tr>
              <td><%= user.id %></td>
              <td><%= user.username %></td>
              <td><%= user.first_name %></td>
              <td><%= user.last_name %></td>
              <td><%= user.email %></td>
              <td><%= user.password %></td>
              <td><%= user.created.toISOString() %></td>
            </tr>
            <% }) %>
          </tbody>
        </table>
      </div>
    </div>

    <!-- Bootstrap JS Bundle -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q"
      crossorigin="anonymous"
    ></script>
  </body>
</html>
