<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Add New User - 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>
    <h1 class="mt-5 mb-5" style="text-align:center;"><i class="bi bi-person-fill-add"></i> Adding New User</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.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>
    <div class="container-sm">
        <form action="/add-user" method="post" id="userForm">
            <label for="username" style="text-align: left;">Username:</label>
            <input id="username" name="username" class="form-control mb-5" value="" required>

            <label for="name" style="text-align: left;">Name:</label>
            <input id="name" name="name" class="form-control mb-5" value="" required>

            <label for="role" style="text-align: left;">Role:</label> 
            <div class="mb-3">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="role" id="basicRole" value="basic" checked required>
                <label class="form-check-label" for="userRole">
                  Basic
                  <i class="bi bi-question-circle-fill text-primary" data-bs-toggle="tooltip" title="Basic Users can only checkout and return books."></i>
                </label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="radio" name="role" id="advancedRole" value="advanced">
                <label class="form-check-label" for="advancedRole">
                  Advanced 
                  <i class="bi bi-question-circle-fill text-primary" data-bs-toggle="tooltip" title="Advanced Users can change their usernames, names, and passwords."></i>
                </label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="radio" name="role" id="adminRole" value="admin">
                <label class="form-check-label" for="adminRole">
                  Admin
                  <i class="bi bi-question-circle-fill text-primary" data-bs-toggle="tooltip" title="Admin Users have complete control of the database."></i>
                </label>
              </div>
            </div>

            <label for="password" style="text-align: left;">Password:</label>
            <input id="password" name="password" class="form-control mb-5" value="" required>
        
            <!-- Buttons -->
            <div class="container" style="padding: 0px;">
              <div class="d-flex justify-content-between align-items-center">
                <a href="/" class="btn btn-primar btn-lgy"><i class="bi bi-house-door-fill"></i> Home</a>
                <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                  <a href="/users" class="btn btn-secondary btn-lg"><i class="bi bi-x-circle-fill"></i> Cancel</a>
                  <button type="submit" class="btn btn-primary btn-lg"><i class="bi bi-floppy2-fill"></i> Save</button>
                </div>
              </div>
            </div>

        </form>
        
    </div>

    <script>
        // Initialize Bootstrap tooltips
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
          return new bootstrap.Tooltip(tooltipTriggerEl)
        })
    </script>

  </body>
</html> 