<!DOCTYPE html>
<html lang="en">
  <head>
    <!--
    <script>
      window.history.pushState({}, "", "<%= newLink %>");
    </script>    
    -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Dashboard</title>
    <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"
    />
  </head>
  <body class="bg-dark text-light">
    <div class="container py-5">
      <!-- Header -->
      <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
          <h2>Hello, <%= sqlResult.user.first_name %>!</h2>
        </div>
        <div>
          <h3>Welcome to your dashboard</h3>
        </div>
        <div>
          <a href="/" class="btn btn-danger">Logout</a>
        </div>
      </div>

      <!-- User creation form -->
      <div class="card text-dark shadow">
        <div class="card-body">
          <h4 class="card-title mb-4">Create a new user</h4>
          <form action="/createUser" method="post">
            <div class="row g-3">
              <div class="col-md-6">
                <label for="first_name" class="form-label">First Name</label>
                <input
                  type="text"
                  name="first_name"
                  id="first_name"
                  class="form-control"
                  placeholder="First name"
                  required
                />
              </div>

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

              <div class="col-md-6">
                <label for="username" class="form-label">Username</label>
                <input
                  type="text"
                  name="username"
                  id="username"
                  class="form-control"
                  placeholder="Username"
                  required
                />
              </div>

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

              <div class="col-md-6">
                <label for="password" class="form-label">Password</label>
                <input
                  type="password"
                  name="password"
                  id="password"
                  class="form-control"
                  placeholder="Password"
                  required
                />
              </div>

              <div class="col-12">
                <button type="submit" class="btn btn-primary w-100">
                  Create User
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>

    <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>